Support Center Ticket Form

How to add Birdie to your Happyfox ticket form

Requirements:

• You already installed Birdie integration with Happyfox.

To allow customers to submit tickets with screen recordings, you need to add Birdie to your Happyfox Support Center

1. Go to Birdie > Helpdesk Settings and copy the snippet

2. Open your Happyfox main menu and go to Support Center > Code customizations > Custom Javascript/HTML and paste your snippet into the text area. Don’t forget to click on the two "Save", and "Publish" buttons:

Add Birdie code snippet

3. While still in the HappyFox Support Center settings, navigate to "Look & Feel" and click on "New Ticket":

Go to New Ticket appearance

On the New Ticket page, scroll down the right sidebar to find the 'Reorder Fields' block, then click 'Customize':

Click on customize

You can now reposition the item named "Category / Ticket Custom Fields" to where you want the Birdie button to appear. Remember to click both buttons: "Save" then "Publish" once you've finished:

Chose the Birdie recording button place

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 Happyfox theme layout, just include a "birdieSettings" object:

<script>
// those are all the default strings you may want to change:
window.birdieSettings = {
  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 Happyfox Settings page… -->
<!-- <https://app.birdie.so/settings/helpdesk#happyfox> --> 

Option II - Change the text depending on the languages Birdie Happyfox 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 Happyfox custom code, just include a "birdieSettings" object with translated keys:

<script>
// those are all the default strings you may want to change:
window.birdieSettings = {
  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.form.button_label_start = "Bildschirmaufnahme starten";
	window.birdieSettings.form.button_label_stop = "Bildschirmaufnahme beenden";
	window.birdieSettings.form.button_label_show = "Bildschirmrekorder anzeigen";
	window.birdieSettings.form.tip_message = "💡 Tipp: Sie können uns anstelle einer schriftlichen Anfrage auch ein Video schicken.";
	window.birdieSettings.form.email_error_message = "Geben Sie eine gültige E-Mail-Adresse ein.";
	window.birdieSettings.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 Happyfox Settings page… -->
<!-- <https://app.birdie.so/settings/helpdesk#happyfox> -->