Get creative! Below is an example of how DropContact use Birdie SDK
1. Install Birdie Web SDK
Go to and copy the Web SDK snippet, and paste it before the </body> tag.
You webSDK snippet will look like the example below, all parameters are optional, but the more you can add the more context you will get 👌
<script>
window.birdieSettings={
app_id:"xxxxxxxx", // your identifier goes here
/* Replace items below with your customer info */
contact_name: "Alexander the Great",
contact_email: "alex@empire.com",
contact_id: "ebf45a994-32d28c4"
</script>
<script>(function(){window.addEventListener("load",function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://app.birdie.so/widget/"+window.birdieSettings.app_id,document.body.appendChild(t)});})();</script>
2. Create a custom launcher
Simply add the classname zstw_open to one or multiple elements you want to use as a launcher, see 2 examples below:
<a href="#" class="zstw_open">Click here</a>
<button class="zstw_open">Open the widget if not already opened</button>
Handling the widget with Javascript
In some situations, you may prefer to use Javascript to control the widget opening. We provide a few methods for you to use:
• To check the widget status: window.zest.widget.opened() will return a boolean.
• To open the widget: window.zest.widget.open() will open the widget if it is not already open.
• To close the widget: window.zest.widget.close() will close the widget if it is not already closed.
• To toggle open/close automatically: window.zest.widget.toggle().
For example:
<script>
function toggle_manual() {
if (window.zest.widget.opened()) {
window.zest.widget.close();
} else {
window.zest.widget.open();
}
}
</script>`
Listening for events
You can hook into 5 different events:
onRecorderOpenedonRecorderClosedonRecordingStartedonRecordingStoppedonRecordingPosted
You must register them from the birdieSettings object, as shown into the example below:
<script>
window.my_callback_recorder_opened = function() {
console.log("The recorder popup has been opened")
// you own code…
};
window.my_callback_recorder_closed = function() {
console.log("The recorder popup has been closed")
// you own code…
};
window.my_callback_recording_started = function() {
console.log("The recording has just started")
// you own code…
};
window.my_callback_recording_stopped = function() {
console.log("The recording has just stopped")
// you own code…
};
window.my_callback_recording_posted = function(link) {
console.log("The recording was sent, the sharing link is:", link)
// you own code can use the the sharing link given as parameter…
// if you changed the birdieSettings autoclose_recorder value to true,
// at this point the recorder popup window will close.
};
window.birdieSettings = {
// other settings…
onRecorderOpened: my_callback_recorder_opened,
onRecorderClosed: my_callback_recorder_closed,
onRecordingStarted: my_callback_recording_started,
onRecordingStopped: my_callback_recording_stopped,
onRecordingPosted: my_callback_recording_posted,
/* optionnally change this to true to make the recorder close automatically */
autoclose_recorder: false
};
</script>
React code example
// BirdieButton.tsx
import React, { useCallback, useEffect } from 'react';
import firebase from 'api/firestore/rebase';
import styles from './styles.module.scss';
export const BirdieButton = () => {
useEffect(() => {
if (typeof window === 'undefined') return;
if (window.innerWidth <= 768) return; // birdie doesn't work on mobile
if (window.birdie) return; // prevent fetching on every new page if already exists
const currentUser = firebase.auth().currentUser;
window.birdieSettings = {
app_id: '#######', // replace ####### with your own identifier found in settings page at https://app.birdie.so/settings/inapp
contact_name: currentUser?.displayName,
contact_email: currentUser?.email,
contact_id: currentUser?.uid,
};
const script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = 'https://app.birdie.so/widget/' + window.birdieSettings.app_id;
document.body.appendChild(script);
}, []);
const handleClick = useCallback(() => {
if (window.birdie.widget.opened()) {
window.birdie?.widget.close();
} else {
window.birdie?.widget.open();
}
}, []);
return (
<button type="button" onClick={handleClick} className={styles.headerButton}>Feedback</button>
);
};
// which requires this type wherever types are defined:
declare global {
interface Window {
birdie: {
widget: {
opened: () => boolean;
open: VoidFunction;
close: VoidFunction;
};
};
birdieSettings: {
app_id: string;
contact_name?: string | null;
contact_email?: string | null;
contact_id?: string;
};
}
}
Example: Add Birdie to a custom ticket form using the Web SDK
A common use case involves using the Web SDK to integrate Birdie into a custom ticket form. While you're free to get creative, here are three different ways Birdie could be added to the Active Campaign ticket form:
