50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
import { useEffect } from 'react';
|
|
|
|
// Add TypeScript declarations for Tawk_API
|
|
declare global {
|
|
interface Window {
|
|
Tawk_API?: any;
|
|
Tawk_LoadStart?: Date;
|
|
}
|
|
}
|
|
|
|
interface TawkToProps {
|
|
propertyId: string;
|
|
widgetId: string;
|
|
}
|
|
|
|
const TawkTo: React.FC<TawkToProps> = ({ propertyId, widgetId }) => {
|
|
useEffect(() => {
|
|
// Initialize tawk.to chat
|
|
const s1 = document.createElement('script');
|
|
s1.async = true;
|
|
s1.src = `https://embed.tawk.to/${propertyId}/${widgetId}`;
|
|
s1.setAttribute('crossorigin', '*');
|
|
|
|
const s0 = document.getElementsByTagName('script')[0];
|
|
s0.parentNode?.insertBefore(s1, s0);
|
|
|
|
return () => {
|
|
// Clean up when the component unmounts
|
|
// Remove the script tag
|
|
const tawkScript = document.querySelector(`script[src*="tawk.to/${propertyId}"]`);
|
|
if (tawkScript && tawkScript.parentNode) {
|
|
tawkScript.parentNode.removeChild(tawkScript);
|
|
}
|
|
|
|
// Remove the tawk.to iframe
|
|
const tawkIframe = document.getElementById('tawk-iframe');
|
|
if (tawkIframe) {
|
|
tawkIframe.remove();
|
|
}
|
|
|
|
// Reset Tawk globals
|
|
delete window.Tawk_API;
|
|
delete window.Tawk_LoadStart;
|
|
};
|
|
}, [propertyId, widgetId]);
|
|
|
|
return null;
|
|
};
|
|
|
|
export default TawkTo;
|