🔌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

Birdie Web SDK

1. Install Birdie Web SDK

Go to settings -> screen recording and copy the Web SDK snippet, and paste it before the </body> tag. 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…
};

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
};
</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:

Option 1: Use an existing field

Option 1 - A Birdie button has been added in the existing Description field

Option 1 - The video link is automatically added to the Description text box

Option 2: Create a new field

Option 2 - A Birdie button has been added to a new field that display a visible text box for the video URL

Option 2 - The video link is automatically added to the field in a visible text box

Option 3: Create a new hidden field

Option 3 - A Birdie button has been added to a new field. There is no visible text box for the video URL

The video URL is not visible. The UI of the Birdie button has changed.

It exists many more options... Your turn now.