Vue Integration

Embed the Maison concierge chat widget in a Vue 3 application. Both the Composition API and Options API are supported — choose the pattern that matches your codebase. Vue official site ↗

1. 1

   Create MaisonChat.vue using the Composition API

   Create src/components/MaisonChat.vue. The script is injected in onMounted and cleaned up in onUnmounted.

   vueCopy

   <!-- MaisonChat.vue — Composition API (script setup) -->
   <template>
     <!-- This component renders nothing; it only manages the script lifecycle. -->
   </template>
   
   <script setup lang="ts">
   import { onMounted, onUnmounted, watch } from 'vue';
   
   const props = defineProps<{
     clientId: string;
   }>();
   
   let scriptEl: HTMLScriptElement | null = null;
   
   function injectScript(clientId: string): void {
     scriptEl = document.createElement('script');
     scriptEl.src = 'https://agent.maison-labs.com/agent-inject.bundle.js';
     scriptEl.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(scriptEl);
   }
   
   function removeScript(): void {
     if(scriptEl) {
       document.head.removeChild(scriptEl);
       scriptEl = null;
     }
   }
   
   onMounted(() => injectScript(props.clientId));
   onUnmounted(() => removeScript());
   
   watch(
     () => props.clientId,
     (newId) => {
       removeScript();
       injectScript(newId);
     },
   );
   </script>

2. 2

   Alternatively — Options API pattern

   If your project uses the Options API, use the mounted and unmounted lifecycle hooks instead.

   vueCopy

   <!-- MaisonChat.vue — Options API -->
   <template>
     <!-- This component renders nothing; it only manages the script lifecycle. -->
   </template>
   
   <script lang="ts">
   import { defineComponent } from 'vue';
   
   export default defineComponent({
     name: 'MaisonChat',
     props: {
       clientId: {
         type: String,
         required: true,
       },
     },
     data() {
       return {
         scriptEl: null as HTMLScriptElement | null,
       };
     },
     mounted() {
       this.injectScript(this.clientId);
     },
     unmounted() {
       this.removeScript();
     },
     watch: {
       clientId(newId: string) {
         this.removeScript();
         this.injectScript(newId);
       },
     },
     methods: {
       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;
       },
       removeScript(): void {
         if(this.scriptEl) {
           document.head.removeChild(this.scriptEl);
           this.scriptEl = null;
         }
       },
     },
   });
   </script>

3. 3

   Use the component in App.vue

   Import and render MaisonChat near the root of your app and pass your Client UUID.

   vueCopy

   <!-- App.vue -->
   <template>
     <MaisonChat client-id="YOUR_CLIENT_UUID"/>
     <!-- rest of your app -->
   </template>
   
   <script setup lang="ts">
   import MaisonChat from './components/MaisonChat.vue';
   </script>

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.