Customize the Birdie button on your Freshdesk portal
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
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.
You can easily change the text of the Birdie button. Before you insert your code snippet into your Freshdesk theme layout, just include a "birdieSettings" object:
<script>
// those are all the default strings you may want to change:
window.birdieSettings = {
freshdesk_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 Freshdesk Settings page… -->
<!-- <https://app.birdie.so/settings/helpdesk#freshdesk> -->
Option II - Change the text depending on the languages
Birdie Freshdesk 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 Freshdesk theme layout, just include a "birdieSettings" object with translated keys:
<script>
// those are all the default strings you may want to change:
window.birdieSettings = {
freshdesk_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 Freshdesk
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.freshdesk_form.button_label_start = "Bildschirmaufnahme starten";
window.birdieSettings.freshdesk_form.button_label_stop = "Bildschirmaufnahme beenden";
window.birdieSettings.freshdesk_form.button_label_show = "Bildschirmrekorder anzeigen";
window.birdieSettings.freshdesk_form.tip_message = "Tipp: Sie können uns anstelle einer schriftlichen Anfrage auch ein Video schicken.";
window.birdieSettings.freshdesk_form.email_error_message = "Geben Sie eine gültige E-Mail-Adresse ein.";
window.birdieSettings.freshdesk_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 Freshdesk Settings page… -->
<!-- <https://app.birdie.so/settings/helpdesk#freshdesk> -->
Move the button to a different location in the form 📍
You can customize where the Birdie button appears in your form.
Create a custom ticket field in Freshdesk (e.g., "Screen Recording").
In your Freshdesk theme layout, make sure the Birdie snippet is added.
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.
<script>
// those are all the default strings you may want to change:
window.birdieSettings = {
freshdesk_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",
}
}
</script>
<!-- Then paste here your snippet found in your Birdie Freshdesk Settings page… -->
<!-- <https://app.birdie.so/settings#freshdesk> -->
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:
Create a new custom field in your Freshdesk form.
→ For example, name it Screen Recording.
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.
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 = {
freshdesk_form: {
conditional_display: "Screen Recording"
show_conditional_field: "True",
}
}
</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.
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.
