Zendesk Ticket 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 Knowledge (formerly called Guide) and click on "Knowledge 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.

Customize the Birdie button on your Zendesk ticket form

By default, the Birdie button is located under Description, and the video URL is posted in the Description field once customers have recorded their video.

You can customize both its appearance and behavior. For example, in the demonstration below, the Birdie button appears in a different position, and the video URL is assigned to a specific field.

Move the button to a different location in the form 📍

Post the Recording URL in a Custom Field

If you want to modify the look or behavior, simply follow the relevant steps below:

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 customize where the Birdie button appears in your form.

1. Create a custom ticket field in Zendesk (e.g., "Screen Recording").

2. In your Zendesk theme layout, make sure the Birdie snippet is added.

3. Then, add a birdieSettings object that includes the conditional_display parameter. Set its value to match the exact name of your custom field (e.g., "Screen Recording").

This tells Birdie to only show the recording button when that field is present in the form.

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",
        show_conditional_field: false,
        prevent_description_injection: true // Optional: add this if you want to prevent the link to land in the main text area
  }
}
</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 custom field in your Zendesk form. → For example, name it Screen Recording.

2. Update your Birdie settings in the theme layout snippet: Add a birdieSettings object with the conditional_display parameter set to the exact name of the custom field you just created.

3. Make the custom field visible (optional): If you want users to see the recording URL in the form, set show_conditional_display to true.

<script>
// those are all the default strings you may want to change:
window.birdieSettings = {
  zendesk_form: {
        conditional_display: "Screen Recording"
        show_conditional_field: true,
        prevent_description_injection: true // Optional: add this if you want to prevent the link to land in the main text area
  }
}
</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 🎥