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:

Add Birdie to your "Submit a ticket" form

Here is what the Birdie button looks like:

Here is the 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> --> 
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 πŸŽ₯

Last updated