Many thanks to Richard who kindly shared this example to Birdie community!
// 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;
};
}
}