Load once and refresh on route changes.
Place the generated script in your shared HTML shell or framework script loader. Use update() after pushState-based navigation so CRM page exclusions are applied. Browser back/forward navigation and viewport changes are also handled by the widget.
React Router route updates
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
// Add the queue bootstrap from JavaScript API before your application starts.
export function ChatRouteSync() {
const { pathname } = useLocation();
useEffect(() => {
window.PeopleTideChat?.('update');
}, [pathname]);
return null;
}Next.js App Router example.
Next.js integration
'use client';
import Script from 'next/script';
import { usePathname } from 'next/navigation';
import { useEffect } from 'react';
export function WebsiteChat({ publicKey }: { publicKey: string }) {
const pathname = usePathname();
useEffect(() => { window.PeopleTideChat?.('update'); }, [pathname]);
return <Script
id="peopletide-chat"
src="https://crm-api.peopletide.com/api/v1/public/web-forms/chatbot.js"
data-public-key={publicKey}
strategy="afterInteractive"
onReady={() => window.PeopleTideChat?.('update')}
/>;
}Optional TypeScript declaration
declare global {
interface Window {
PeopleTideChat?: (command: string, argument?: unknown) => void;
}
}
export {};Choose lifecycle boundaries deliberately.
- Mount the integration in a stable application layout, not on each route. Do not shut down on every route change; that discards the current conversation.
- Use CRM excluded paths for login, account and patient-portal pages. show() cannot bypass exclusions.
- Call shutdown at the application/session boundary when conversation memory should be discarded. Explicitly boot and register callbacks again to restart.
- Use framework script deduplication or the single HTML snippet, never two competing installation methods.
- For an application theme toggle, call update({ theme_mode: "dark" }) or update({ theme_mode: "light" }); system mode follows the operating system.