React Integration

Embed the Maison concierge chat widget in a React application using a reusable component that handles script loading and cleanup via useEffect. React official site ↗

1. 1

   Create the MaisonChat component

   Create a new file MaisonChat.tsx in your components folder. The component injects the bundle script on mount and removes it on unmount, so it is safe to use in a component tree.

   tsx

   Copy

   import { useEffect } from 'react';
   
   export function MaisonChat({ clientId }: { clientId: string }) {
     useEffect(() => {
       const script = document.createElement('script');
       script.src = 'https://agent.maison-labs.com/agent-inject.bundle.js';
       script.setAttribute('data-cfasync', 'false');
       script.setAttribute('data-no-minify', '1');
       script.setAttribute('data-no-optimize', '1');
       script.setAttribute('data-no-defer', '1');
       script.setAttribute('data-noptimize', '1');
       script.onload = () => {
         const sessionId = new URLSearchParams(window.location.search).get('mcbsid');
         const mcbs = (window as any).initMcbs({
           clientId,
           sessionId,
           // locale: 'en-US',                     // Override browser locale
           // iconPosition: { top: 0, bottom: 20, left: 0, right: 20 },  // Chat icon position (px)
           // loadChatWindow: 'load',   // When the chat window loads: 'load' (default), 'interaction', 'lazy' or 'eager'
           // onSessionUpdate: (id) => console.log('Session:', id),
           // onLocaleUpdate: (locale) => console.log('Locale:', locale),
         });
         mcbs.showIcon();
       };
       document.head.appendChild(script);
   
       return() => {
         document.head.removeChild(script);
       };
     }, [clientId]);
   
     return null;
   }

2. 2

   Render MaisonChat in your app

   Import and render the component near the root of your application. Pass your Client UUID as the clientId prop.

   tsx

   Copy

   import { MaisonChat } from './MaisonChat';
   
   export default function App() {
     return(
       <>
         <MaisonChat clientId="YOUR_CLIENT_UUID" />
         {/* rest of your app */}
       </>
     );
   }

3. 3

   Optionally wire up session callbacks

   If you need to persist or observe the session ID (for example to resume a conversation), extend the component to accept an onSessionUpdate prop. The callback receives the session ID first and a { clientId } meta object second — for a hotel group the clientId changes when the guest is handed off to one of the properties, so persist both to restore the right conversation.

   tsx

   Copy

   import { useEffect } from 'react';
   
   export function MaisonChat({
     clientId,
     onSessionUpdate,
   }: {
     clientId: string;
     onSessionUpdate?: (sessionId: string, meta?: { clientId: string }) => void;
   }) {
     useEffect(() => {
       const script = document.createElement('script');
       script.src = 'https://agent.maison-labs.com/agent-inject.bundle.js';
       script.setAttribute('data-cfasync', 'false');
       script.setAttribute('data-no-minify', '1');
       script.setAttribute('data-no-optimize', '1');
       script.setAttribute('data-no-defer', '1');
       script.setAttribute('data-noptimize', '1');
       script.onload = () => {
         const sessionId = new URLSearchParams(window.location.search).get('mcbsid');
         const mcbs = (window as any).initMcbs({
           clientId,
           sessionId,
           // locale: 'en-US',                     // Override browser locale
           // iconPosition: { top: 0, bottom: 20, left: 0, right: 20 },  // Chat icon position (px)
           // loadChatWindow: 'load',   // When the chat window loads: 'load' (default), 'interaction', 'lazy' or 'eager'
           onSessionUpdate,
           // onLocaleUpdate: (locale) => console.log('Locale:', locale),
         });
         mcbs.showIcon();
       };
       document.head.appendChild(script);
   
       return() => {
         document.head.removeChild(script);
       };
     }, [clientId, onSessionUpdate]);
   
     return null;
   }

4. 4

   Verify in DevTools

   Open your browser DevTools, switch to the Elements tab, and look for #maison-chat-icon in the DOM. If it's present, the widget initialised correctly.