Embed Widget

Putting Your Assistant on Your Website Go Live

The Embed page gives you the code to add your assistant to your website. Once installed, your assistant appears as a friendly chat bubble that visitors can click to start a conversation – just like having a helpful team member available 24/7.

Getting the Code

Copy the code snippet provided and paste it into your website. The code is unique to your assistant and includes all the styling you’ve set up in Appearance.

Where to Put the Code

• Paste the code just before the closing </body> tag in your website
• Don’t worry – it loads in the background and won’t slow down your page
• When you change appearance or settings, the widget updates automatically – no need to touch the code again

Step-by-Step for Different Websites

HTML

Basic Website

1. Copy the code from the Embed page in your dashboard

2. Open your HTML file in a code editor

3. Paste before </body>

   <!-- Your Assistant Chat Widget -->
   <script
     src="https://app.mygptassistants.com/widget.js"
     data-bot-id="YOUR_BOT_ID"
     async
   ></script>
   </body>

4. Save and upload your website

WordPress

WordPress

1. Install a code plugin like “Insert Headers and Footers” or “WPCode”

2. Go to the plugin settings in your WordPress admin

3. Paste in the footer section

   <script
     src="https://app.mygptassistants.com/widget.js"
     data-bot-id="YOUR_BOT_ID"
     async
   ></script>

4. Save your changes

Tip

Using a plugin means you don’t have to edit theme files directly. Your assistant will stay even if you change themes!

Shopify

Shopify

1. Go to Online Store → Themes in Shopify admin

2. Click Actions → Edit code

3. Find theme.liquid in the Layout folder

4. Paste before </body>

   <script
     src="https://app.mygptassistants.com/widget.js"
     data-bot-id="YOUR_BOT_ID"
     async
   ></script>

5. Save the file

Caution

Make a backup of your theme before editing code. Changes to theme.liquid affect your entire store.

React

React / Next.js

Create a component for the chat widget:

import { useEffect } from 'react';

export default function ChatWidget() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://app.mygptassistants.com/widget.js';
    script.setAttribute('data-bot-id', 'YOUR_BOT_ID');
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return null;
}

Then add it to your layout or app:

import ChatWidget from './components/ChatWidget';

export default function App() {
  return (
    <>
      {/* Your app content */}
      <ChatWidget />
    </>
  );
}

Vue

Vue.js

Create a component:

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

let script;

onMounted(() => {
  script = document.createElement('script');
  script.src = 'https://app.mygptassistants.com/widget.js';
  script.setAttribute('data-bot-id', 'YOUR_BOT_ID');
  script.async = true;
  document.body.appendChild(script);
});

onUnmounted(() => {
  if (script) document.body.removeChild(script);
});
</script>

<template>
  <!-- Component renders nothing -->
</template>

Add to your App.vue:

<template>
  <div id="app">
    <!-- Your app content -->
    <ChatWidget />
  </div>
</template>

Other

Other Platforms

Squarespace:

• Go to Settings → Advanced → Code Injection
• Paste in the Footer section

Webflow:

• Go to Project Settings → Custom Code
• Paste in Footer Code section

Wix:

• Use the Velo Code Editor
• Add script to masterPage.js

Note

For any platform, the goal is to add the code before the closing </body> tag. Check your platform’s help docs for “custom code” or “code injection.”

For Developers: Widget Events

Listen for what’s happening with the chat widget:

// Know when customers interact with your assistant
window.MGAWidget.on('open', () => {
  console.log('Chat opened');
});

window.MGAWidget.on('close', () => {
  console.log('Chat closed');
});

window.MGAWidget.on('message', (data) => {
  console.log('New message:', data);
});

Customization Options

Position

Choose which corner of the screen your assistant appears in.

Chat Icon

Customize the chat bubble that visitors click to start chatting.

Colors

Match the widget to your brand colors.

Styling Your Widget

All the visual customization happens in the Appearance section. Changes show up automatically – no need to change your embed code.

Testing Your Installation

1. Add the code to your website using one of the methods above

2. Visit your website and look for the chat bubble

3. Click to open and have a test conversation

4. Check on mobile – make sure it works on phones and tablets too

Testing Checklist

• Test on different devices (phone, tablet, computer)
• Try different browsers (Chrome, Firefox, Safari)
• Make sure the chat bubble doesn’t cover anything important
• Verify all your customizations show up correctly

Troubleshooting

Can't see the chat widget?

1. Double-check that your assistant ID is correct in the code
2. Make sure your assistant is active (not paused)
3. Look for error messages in your browser’s developer console
4. Confirm the code is placed before </body>

Widget overlapping other elements?

• Try adjusting the data-z-index setting if needed
• Check if your website’s CSS is conflicting
• Try a different corner position

About Performance

• The code loads in the background without slowing your page
• The widget files are optimized and cached
• Minimal impact on page speed

Related Topics

Appearance Customize how your assistant looks

Integrations Other places to deploy your assistant

Settings Adjust how your assistant behaves