Bubble - mu.chat - Connect custom data to large language models

To install an Agent on your website using the Bubble widget use the following code snippet:

<script type="module">
  import Chatbox from 'https://cdn.mu.chat/embeds/dist/chatbox/index.js?v=2';

  Chatbox.initBubble({
    agentId: 'YOUR_AGENT_ID',
  });
</script>

Replace YOUR_AGENT_ID with the ID of your Agent

// place it in the head tag of your index.html file.
<script
  id="muchat-agent"
  type="module"
  dangerouslySetInnerHTML={{
    __html: `import Chatbox from 'https://cdn.mu.chat/embeds/dist/chatbox/index.js?v=2';

    Chatbox.initBubble({
      agentId: 'YOUR_AGENT_ID',
    });`
  }}
/>

Replace YOUR_AGENT_ID with the ID of your Agent

// app/layout.tsx or app/page.tsx
import Script from 'next/script'

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script
        strategy="lazyOnload"
        type="module"
        dangerouslySetInnerHTML={{
          __html: `
            import Chatbox from 'https://cdn.mu.chat/embeds/dist/chatbox/index.js?v=2';
            Chatbox.initBubble({
              agentId: 'YOUR_AGENT_ID',
            });
          `
        }}
      />
    </>
  )
}

Replace YOUR_AGENT_ID with the ID of your Agent

// pages/_app.tsx or pages/index.tsx
import Head from 'next/head'

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <script
          id="muchat-agent"
          type="module"
          dangerouslySetInnerHTML={{
            __html: `
              import Chatbox from 'https://cdn.mu.chat/embeds/dist/chatbox/index.js?v=2';

              Chatbox.initBubble({
                agentId: '${process.env.NEXT_PUBLIC_AGENT_ID}',
                formId: '${process.env.NEXT_PUBLIC_FORM_ID}',

                contact: {
                  firstName: 'John',
                  lastName: 'Doe',
                  email: 'customer@email.com',
                  phoneNumber: '+33612345644',
                  userId: '42424242',
                },


                loadStrategy: "FAST",

              });
            `
          }}
        />
      </Head>
      <Component {...pageProps} />
    </>
  )
}

Replace YOUR_AGENT_ID with the ID of your Agent

// src/app/chat-widget/chat-widget.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-chat-widget',
template: '',
})
export class ChatWidgetComponent implements OnInit {
ngOnInit() {
this.loadChatbox();
}

private async loadChatbox() {
try {
const script = document.createElement('script');
script.type = 'module';
script.innerHTML = `
import Chatbox from 'https://cdn.mu.chat/embeds/dist/chatbox/index.js?v=2';

    Chatbox.initBubble({
      agentId: 'YOUR_AGENT_ID'
    });
  `;

  document.head.appendChild(script);
} catch (error) {
  console.error('Error loading Chatbox:', error);
}

}
}

// src/app/app.module.ts
import { NgModule } from '@angular/core';
import { ChatWidgetComponent } from './chat-widget/chat-widget.component';

@NgModule({
declarations: [ChatWidgetComponent],
// ...
})
export class AppModule { }

Replace YOUR_AGENT_ID with the ID of your Agent

<!-- src/components/ChatWidget.vue -->
<template>
<!-- Empty template as the widget injects itself -->
</template>

<script setup>
import { onMounted } from 'vue';

onMounted(async () => {
const script = document.createElement('script');
script.type = 'module';
script.innerHTML = `
import Chatbox from 'https://cdn.mu.chat/embeds/dist/chatbox/index.js?v=2';

Chatbox.initBubble({
  agentId: 'YOUR_AGENT_ID'
});
`;

document.head.appendChild(script);
});
</script>

Replace YOUR_AGENT_ID with the ID of your Agent

<script>
(function() {
var agentId = 'XXX'; // YOUR_AGENT_ID

var chatboxScript = document.createElement('script');
chatboxScript.type = 'module';
chatboxScript.innerHTML =
    'import Chatbox from "https://cdn.mu.chat/embeds/dist/chatbox/index.js?v=2";\n\n' +
    'Chatbox.initBubble({\n' +
    "  agentId: '" + agentId + "'\n" +
    '});';
document.body.appendChild(chatboxScript);

})();

</script>

Google Tag Manager Integration

Setup Instructions

Prepare Your Agent ID: Replace 'XXX' in the script above with your actual Agent ID
Copy the Snippet: Copy the complete JavaScript code provided above
Access GTM: Navigate to your Google Tag Manager dashboard
Create New Tag:
- Tag Type: Custom HTML
- Name: “Muchat Widget” (or your preferred name)
Configure Tag: Paste the code snippet into the HTML field
Set Trigger: Choose “All Pages” or specific pages as needed
Deploy: Save and publish your GTM container

You can find the Agent ID in the Agent settings under the Settings tab.

See all the available attributes in the Chatbot Reference.

Widgets

​Google Tag Manager Integration

​Setup Instructions

Google Tag Manager Integration

Setup Instructions