🔌Web SDK

Open Birdie recorder from a specific button, link or element in your web app!

Get creative! Below is an example of how DropContact use Birdie SDK

1. Install Birdie Web SDK

Go to settings -> screen recording 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: "[email protected]",
    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:

onRecorderOpened onRecorderClosed onRecordingStarted onRecordingStopped onRecordingPosted 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: