Zendesk Form

How to add Birdie to your Zendesk ticket form

To allow customers to submit tickets with screen recordings, you need to add Birdie to your Zendesk "Submit a ticket" form

Requirements:

• You are a Zendesk Admin.

• Birdie Zendesk app is already installed on your Zendesk.

Add Birdie to your "Submit a ticket" form

Here is what the Birdie button looks like:

Birdie on your Zendesk ticket form

Here is the installation walkthrough:

Zendesk Form - Installation walkthrough

1. Open Zendesk Guide and click on "Guide Admin".

2. In the left menu, navigate to "Themes" (👁 icon).

3. In your "live theme", click "Customize" and then select "Edit code" in the bottom right.

4. Look for the file "footer.hbs" and insert the code snippet at the end of the file. Go to settings -> helpdesk to copy the snippet (no developer required).

5. Click "Publish" to finish the installation.

I want to change the color of the button 🎨

To customize the background color of the button, add ?bgcolor=FF00FF at the end of the snippet URL and replace the color code with your desired one. This will override the color set in your Birdie settings page. Here is 1-min demo video 🎥

Change the text and/or language of the button 🖊

Option I - Change the text

You can easily change the text of the Birdie button. Before you insert your code snippet into your Zendesk theme layout, just include a "birdieSettings" object:

Here is a 1-min demo 🎥

<script>
// those are all the default strings you may want to change:
window.birdieSettings = {
  zendesk_form: {
  	button_label_start: "Record my screen",
  	button_label_stop: "Stop recording",
  	button_label_show: "Show Recorder",
  	tip_message: "💡 Tip: Add a screen recording to your request",
  	email_error_message: "Enter a valid email address",
  	success_message: "Here is the recording:"
  }
}
</script>

<!-- Then paste here your snippet found in your Birdie Zendesk Settings page… -->
<!-- <https://app.birdie.so/settings/helpdesk#zendesk> --> 

Option II - Change the text depending on the languages Birdie Zendesk Form snippet comes with preset messages in German, French, Spanish, Portuguese, and English. But you can adjust these messages or add your own translations.

Before you insert your code snippet into your Zendesk theme layout, just include a "birdieSettings" object with translated keys:

<script>
// those are all the default strings you may want to change:
window.birdieSettings = {
  zendesk_form: {
  	button_label_start: "Record my screen",
  	button_label_stop: "Stop recording",
  	button_label_show: "Show Recorder",
  	tip_message: "💡 Tip: Add a screen recording to your request",
  	email_error_message: "Enter a valid email address",
  	success_message: "Here is the recording:"
  }
}

var detected_language = "en";
if (window?.HelpCenter?.user?.locale) {
		// this is your user language info coming from Zendesk 
    detected_language = window.HelpCenter.user.locale.substring(0, 2);
} else if (navigator.language) {
		// this is the browser detected language info 
    detected_language = navigator.language.substring(0, 2);
}

if (detected_language == "de") {
	// you can customize german strings:
	window.birdieSettings.zendesk_form.button_label_start = "Bildschirmaufnahme starten";
	window.birdieSettings.zendesk_form.button_label_stop = "Bildschirmaufnahme beenden";
	window.birdieSettings.zendesk_form.button_label_show = "Bildschirmrekorder anzeigen";
	window.birdieSettings.zendesk_form.tip_message = "💡 Tipp: Sie können uns anstelle einer schriftlichen Anfrage auch ein Video schicken.";
	window.birdieSettings.zendesk_form.email_error_message = "Geben Sie eine gültige E-Mail-Adresse ein.";
	window.birdieSettings.zendesk_form.success_message = "Hier ist die Aufzeichnung:";
} else if (detected_language == "ru") {
	// or customize russian strings, etc. 
}
</script>

<!-- Then paste here your snippet found in your Birdie Zendesk Settings page… -->
<!-- <https://app.birdie.so/settings/helpdesk#zendesk> --> 

Move the button to a different location in the form 📍

You can be pretty creative. Before you insert your code snippet into your Zendesk theme layout, just add a "birdie Settings" object that includes the parameter conditional_display:

2-min demo video 🎥

<script>
// those are all the default strings you may want to change:
window.birdieSettings = {
  zendesk_form: {
  	button_label_start: "Record my screen",
  	button_label_stop: "Stop recording",
  	button_label_show: "Show Recorder",
  	tip_message: "💡 Tip: Add a screen recording to your request",
  	email_error_message: "Enter a valid email address",
  	success_message: "Here is the recording:",
        conditional_display: "Screen Recording"
  }
}
</script>

<!-- Then paste here your snippet found in your Birdie Zendesk Settings page… -->
<!-- <https://app.birdie.so/settings#zendesk> --> 

Post the Recording URL in a Custom Field

By default, Birdie posts the recording URL in the description field. If you'd prefer to have the recording URL automatically placed in a different field, follow these steps:

1. Create a New Field: Add a new field to your form. For example, you can name this field "video url."

2. Update Birdie Settings: Modify the Birdie settings by adding a birdieSettings object with the conditional_display parameter. Set this parameter to match the name of the new field you created:

<script>
// those are all the default strings you may want to change:
window.birdieSettings = {
  zendesk_form: {
        conditional_display: "video url"
  }
}
</script>

Visibility Consideration: If you decide to hide this custom field from customers, ensure it remains visible to agents. This allows agents to access the recording URL even if it’s not shown to the customer

Display the button down a specific path 🐾

Make sure that you have already installed the "birdie Settings" object, which includes the conditional_display parameter. You can find more information on how to do this here.

Then check this 1-min demo video 🎥

Specify "Record my screen" as a required field 🔒

Make sure that you have already installed the "birdie Settings" object, which includes the conditional_display parameter. You can find more information on how to do this here.

Then check this 1-min demo video 🎥

Display the button based on authentication status 👤

Just add a parameter at the end of the snippet URL:

• To display the button for authenticated users only, add ?contact_type=auth.

• To display the button for anonymous users only, add ?contact_type=anonymous

Here is a 1-min demo 🎥