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