In your "live theme", click "Customize" and then select "Edit code" in the bottom right.
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).
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 "birdie Settings" object:
<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#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 "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 ="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#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:
<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.
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.