Zendesk Form

How to add Birdie to your Zendesk ticket form

If you need help or have a question, contact us at [email protected]

To allow customers to submit tickets with screen recordings, you need to add Birdie to your Zendesk "Submit a ticket" form and/or to your website's Zendesk widget.

Requirements:

• You are a Zendesk Admin.

• Birdie Zendesk app is already installed on your Zendesk.

I. Add Birdie to your "Submit a ticket" form

Birdie on your Zendesk ticket form

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

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

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

4. Locate the file "footer.hbs" and paste the code snippet at the end of the file. 👾 You will find the snippet in your Settings (no developer required)

5. Click "Publish". You are done.

Installation walkthrough

I want to change the color of the button 🎨

To customize the button's background color, add ?bgcolor=FF00FF at the end of the snippet URL (replacing the color code with the desired one). This overrides the color set in your Birdie settings page

I want to change the message of the button 🖊

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, include a "birdie Settings" 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: "Nehmen Sie meinen Bildschirm auf",
	  	button_label_stop: "Höre auf, aufzunehmen",
	  	button_label_show: "Rekorder anzeigen",
	  	tip_message: "💡 Tipp: Fügen Sie Ihrer Anfrage eine Bildschirmaufnahme hinzu",
	  	email_error_message: "Geben Sie eine gültige email ein",
	  	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#zendesk> --> 

I want to display the button based on authentication status 👤

Display the record button based on authentication status. Use a hack by adding 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

II. Add Birdie to your Zendesk widget on your website.

Allow customers to record their screens right from the Zendesk widget (in chat or form mode).

Birdie on your Zendesk widget

1. Add the code snippet to your web app

   👾 You will find the snippet to paste in your Settings. (dev required)