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. 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:

function toggle_manual() {
    if (window.zest.widget.opened()) {
    } else {

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:

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
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;  
	}, []);

	const handleClick = useCallback(() => {
		if (window.birdie.widget.opened()) {
		} else {
	}, []);

	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;

Last updated