Angular Integration

Embed the Maison concierge chat widget in an Angular application using a standalone component. ngOnInit handles script injection and ngOnDestroy handles cleanup. Angular official site ↗

1. 1

   Create the MaisonChatComponent

   Create src/app/maison-chat.component.ts. The component is standalone, renders no template, and manages the script tag via the Angular lifecycle.

   typescriptCopy

   // maison-chat.component.ts
   import {
     Component,
     Input,
     OnInit,
     OnDestroy,
     OnChanges,
     SimpleChanges,
   } from '@angular/core';
   
   @Component({
     selector: 'app-maison-chat',
     standalone: true,
     template: '',  // renders nothing — manages script lifecycle only
   })
   export class MaisonChatComponent implements OnInit, OnDestroy, OnChanges {
     @Input({ required: true }) clientId!: string;
   
     private scriptEl: HTMLScriptElement | null = null;
   
     ngOnInit(): void {
       this.injectScript(this.clientId);
     }
   
     ngOnChanges(changes: SimpleChanges): void {
       if(changes['clientId'] && !changes['clientId'].firstChange) {
         this.removeScript();
         this.injectScript(this.clientId);
       }
     }
   
     ngOnDestroy(): void {
       this.removeScript();
     }
   
     private injectScript(clientId: string): void {
       const script = document.createElement('script');
       script.src = 'https://agent.maison-labs.com/agent-inject.bundle.js';
       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)
           // onSessionUpdate: (id) => console.log('Session:', id),
           // onLocaleUpdate: (locale) => console.log('Locale:', locale),
         });
         mcbs.showIcon();
       };
       document.head.appendChild(script);
       this.scriptEl = script;
     }
   
     private removeScript(): void {
       if(this.scriptEl) {
         document.head.removeChild(this.scriptEl);
         this.scriptEl = null;
       }
     }
   }

2. 2

   Import and use it in AppComponent

   Import MaisonChatComponent in your root AppComponent and bind your Client UUID.

   typescriptCopy

   // app.component.ts
   import { Component } from '@angular/core';
   import { MaisonChatComponent } from './maison-chat.component';
   
   @Component({
     selector: 'app-root',
     standalone: true,
     imports: [MaisonChatComponent],
     templateUrl: './app.component.html',
   })
   export class AppComponent {
     readonly clientId = 'YOUR_CLIENT_UUID';
   }

   htmlCopy

   <!-- app.component.html -->
   <app-maison-chat [clientId]="clientId" />
   <!-- rest of your app -->

3. 3

   Build and run your application

   Run ng serve and open your app in the browser. The Maison chat icon should appear in the bottom-right corner within a few seconds.

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.