Standard (Iframe) - mu.chat - Connect custom data to large language models

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

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

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

<muchat-chatbox-standard />

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

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

<muchat-chatbox-standard />

// 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.initStandard({
          agentId: 'YOUR_AGENT_ID',
        });
      `
    }}
  />
  <muchat-chatbox-standard />
</>

// 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.initStandard({
              agentId: 'YOUR_AGENT_ID',
            });
          `
        }}
      />
      <muchat-chatbox-standard />
    </>
  )
}

// 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.initStandard({
                agentId: '${process.env.NEXT_PUBLIC_AGENT_ID}',
                formId: '${process.env.NEXT_PUBLIC_FORM_ID}',
                contact: {
                  firstName: 'John',
                  lastName: 'Doe',
                  email: '[email protected]',
                  phoneNumber: '+33612345644',
                  userId: '42424242',
                },
                interface: {
                  primaryColor: '#145dee',
                },
                loadStrategy: "FAST",
              });
            `
          }}
        />
      </Head>
      <Component {...pageProps} />
      <muchat-chatbox-standard />
    </>
  )
}

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

@Component({
  selector: 'app-chat-widget',
  template: '<muchat-chatbox-standard />',
})
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.initStandard({
          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 { }

<!-- src/components/ChatWidget.vue -->
<template>
  <muchat-chatbox-standard />
</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.initStandard({
      agentId: 'YOUR_AGENT_ID'
    });
  `;

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

Replace YOUR_AGENT_ID with the ID of your Agent

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

See all the available attributes in the Chatbot Reference.

Widgets