Birdie
HomepageLog inSign up
Birdie Documentation
Birdie Documentation
  • 👋START HERE
  • What is Birdie?
  • Getting started
  • Invite teammates
  • 🎥Request Screen Recordings
    • Overview
    • Installation
      • 🧩Helpdesk Integrations
      • 🎨Customize Appearance
      • 👾Snippet
      • 🌐Browser compatibility
      • 🌎Languages
      • 🔌Web SDK
      • 🔗Universal Request Link
    • DevTools: Console Logs & Network Requests
    • AI Summary
    • Misc.
      • Forward recordings
      • Routing rules for folders
      • API
      • How-to's Library
  • 🎥Record my screen
    • Overview
    • Install Chrome extension
    • Recording Options
    • DevTools: Console Logs & Network Requests
    • Keyboard Shortcuts
    • Incognito Mode
    • Troubleshooting
      • How to quickly fix common recording errors
      • How to troubleshoot Microphone issues in Birdie Extension
      • How to troubleshoot Screen Recording issues in Birdie Extension
  • 🧩Helpdesk
    • 🟤Zendesk
      • Installation
      • Flows
        • Human Request
        • Zendesk Macros
        • Zendesk Ticket Form
        • Zendesk Auto-Reply
        • Zendesk AI Agents
        • Zendesk Agent Signature
        • Zendesk Widget (Classic)
      • Misc.
      • Analytics
      • Uninstall
    • ⚫Intercom
      • Installation
      • Flows
        • Human Request
        • Intercom Workflows
        • FIN
        • Intercom Messenger Home
        • Misc.
        • Analytics
    • 🟢Freshdesk
      • Installation
      • Flows
        • Human Request
        • Portal
        • Canned Answers
        • Auto Reply
        • Agent Signature
      • Analytics
    • 🟢Freshchat
      • Installation
      • Flows
        • Manual Request
    • 🔵Jira Service Management
      • Installation
      • Flows
        • Human Request
        • Customer Portal
      • Uninstall
    • 🟣Help Scout
      • Installation
      • Flows
        • Human Request
        • Saved Replies
        • Auto Reply
    • 🔵Salesforce Service Cloud
      • Request link - Installation
      • Flows
        • Human Request
        • Ticket Form
    • Others
      • 🟠Happyfox
        • Installation
        • Flows
          • Human Request
          • Support Center Ticket Form
      • ⚫Ada
      • 🟣Forethought
      • 🟠Hubspot
        • Flows
          • Human Request via Snippet
      • ⚫Service Now
        • Flows
      • 🟣Front
        • Flows
      • 🟢Zoho Desk
        • Flows
      • 🔵Crisp
        • Flows
      • ⚪Other Helpdesk
        • Flows
          • Human Request
          • Ticket Form
  • 🔐Security
    • Storage Location
    • Hide sensitive data
    • Auto data deletion
    • Recordings Privacy Settings
      • Incoming Recordings: Only Workspace Members Can Watch
      • Outgoing Recordings: Only Workspace Members + Selected Individuals Can Watch
    • GDPR opt-in
    • Two-factor authentication
    • Remote log out
    • SAML SSO
      • Setup SSO with Okta
    • SCIM
      • Okta settings
Powered by GitBook
On this page
  1. Request Screen Recordings
  2. Installation

Web SDK

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

PreviousLanguagesNextUniversal Request Link

Last updated 1 month ago

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:

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:

Option 1: Use an existing field

Option 2: Create a new field

Option 3: Create a new hidden field

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

🎥
🔌
settings -> screen recording
Birdie Web SDK
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 - 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 - 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.