Widget Integration Guide

Myndy lets you deploy your AI agent as a live chat widget on any website. Once embedded, visitors can start conversations with your agent instantly — no extra setup required on their end.

Prerequisites

An active Myndy account
At least one AI agent created
Access to your website's source code

Step 1: Get Your Embed Code

Go to Agents in the sidebar
Open your agent and click the Widget tab
Under Embed Code, click Copy

Your embed code looks like this:

<script
  src="https://widget.myndy.ai/myndy-convai-widget.es.js"
  type="module"
  async
></script>
<myndy-convai
  agent_id="YOUR_AGENT_ID"
></myndy-convai>

Each agent has a unique agent_id. Never share this value or mix it across agents.

Step 2: Add the Code to Your Website

The Myndy widget is a standard web component — it works with any stack. Pick your framework below:

Plain HTML

The simplest way to add the widget — paste the snippet directly into your HTML file just before the closing </body> tag.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Website</title>
  </head>
  <body>

    <!-- Your page content -->

    <!-- Myndy Widget -->
    <script
      src="https://widget.myndy.ai/myndy-convai-widget.es.js"
      type="module"
      async
    ></script>
    <myndy-convai
      agent_id="YOUR_AGENT_ID"
    ></myndy-convai>

  </body>
</html>

This works for any static site, standalone HTML page, or template-based setup. No build tools or frameworks required.

Next.js

The recommended approach is to create a dedicated client component so the widget only loads on the browser (not during server-side rendering).

1. Create a MyndyWidget component

components/MyndyWidget.tsx

"use client";

import Script from "next/script";

export default function MyndyWidget({ agentId }: { agentId: string }) {
  return (
    <>
      <Script
        src="https://widget.myndy.ai/myndy-convai-widget.es.js"
        strategy="lazyOnload"
      />
      {/* @ts-expect-error – custom web component */}
      <myndy-convai agent_id={agentId} />
    </>
  );
}

2. Add it to your root layout

app/layout.tsx

import MyndyWidget from "@/components/MyndyWidget";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <MyndyWidget agentId="YOUR_AGENT_ID" />
      </body>
    </html>
  );
}

Placing the component in layout.tsx ensures the widget is present on every page without reloading between navigations.

Angular

Use Angular's afterNextRender lifecycle hook to inject the widget script safely on the client side.

1. Declare the custom element schema

In your AppModule (or standalone component), allow unknown HTML elements:

app.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  bootstrap: [AppComponent],
})
export class AppModule {}

2. Load the widget script in your root component

app.component.ts

import { Component, afterNextRender } from "@angular/core";

@Component({
  selector: "app-root",
  template: `
    <router-outlet></router-outlet>
    <myndy-convai agent_id="YOUR_AGENT_ID"></myndy-convai>
  `,
})
export class AppComponent {
  constructor() {
    afterNextRender(() => {
      const script = document.createElement("script");
      script.src = "https://widget.myndy.ai/myndy-convai-widget.es.js";
      script.type = "module";
      script.async = true;
      document.body.appendChild(script);
    });
  }
}

afterNextRender ensures the script is only appended in the browser, making this safe for Angular Universal (SSR) projects.

WordPress

No plugin needed — paste the embed code directly into your theme or use the built-in Custom HTML block.

Option A: Add to your theme (all pages)

Edit your active theme's footer.php file and paste the snippet just before </body>:

footer.php

<!-- Myndy Widget -->
<script
  src="https://widget.myndy.ai/myndy-convai-widget.es.js"
  type="module"
  async
></script>
<myndy-convai
  agent_id="YOUR_AGENT_ID"
></myndy-convai>

<?php wp_footer(); ?>
</body>
</html>

Go to Appearance → Theme File Editor → footer.php to edit this file from the WordPress dashboard.

Option B: Add to a specific page only

Open the page in the Block Editor
Add a Custom HTML block
Paste the embed code into it and publish

This is useful if you only want the widget on a landing page or contact page.

Laravel

The cleanest approach is to add the widget to your Blade layout file so it appears on every page.

Add to your main layout

Open your primary layout file (commonly resources/views/layouts/app.blade.php) and paste the snippet just before </body>:

resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
  <head>
    <meta charset="utf-8" />
    <title>{{ config('app.name') }}</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
  </head>
  <body>

    @yield('content')

    <!-- Myndy Widget -->
    <script
      src="https://widget.myndy.ai/myndy-convai-widget.es.js"
      type="module"
      async
    ></script>
    <myndy-convai
      agent_id="YOUR_AGENT_ID"
    ></myndy-convai>

  </body>
</html>

Page-specific use

If you only want the widget on certain pages, use a Blade stack instead:

resources/views/layouts/app.blade.php

  @stack('scripts')
</body>

Then push from any individual view:

resources/views/contact.blade.php

@push('scripts')
  <script
    src="https://widget.myndy.ai/myndy-convai-widget.es.js"
    type="module"
    async
  ></script>
  <myndy-convai agent_id="YOUR_AGENT_ID"></myndy-convai>
@endpush

Django

Add the widget to your base template so it loads across all pages that extend it.

1. Add to your base template

Open your base template (commonly templates/base.html) and paste the snippet just before </body>:

templates/base.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>{% block title %}My Site{% endblock %}</title>
    {% load static %}
  </head>
  <body>

    {% block content %}{% endblock %}

    <!-- Myndy Widget -->
    <script
      src="https://widget.myndy.ai/myndy-convai-widget.es.js"
      type="module"
      async
    ></script>
    <myndy-convai
      agent_id="YOUR_AGENT_ID"
    ></myndy-convai>

  </body>
</html>

Every template that uses {% extends "base.html" %} will automatically include the widget.

Page-specific use

Use a named block to include the widget only on select pages:

templates/base.html

    {% block extra_scripts %}{% endblock %}
  </body>
</html>

Then override the block in the target template:

templates/contact.html

{% extends "base.html" %}

{% block extra_scripts %}
  <script
    src="https://widget.myndy.ai/myndy-convai-widget.es.js"
    type="module"
    async
  ></script>
  <myndy-convai agent_id="YOUR_AGENT_ID"></myndy-convai>
{% endblock %}

The widget script loads asynchronously and won't block your page from rendering regardless of the framework used.

After embedding, you can control the widget's behavior from the Widget tab in your agent settings — no code changes needed.

Choose where the widget bubble appears on the screen:

Option	Description
Bottom	Centered at the bottom (default)
Bottom Left	Bottom-left corner
Bottom Right	Bottom-right corner
Top	Centered at the top
Top Left	Top-left corner
Top Right	Top-right corner

Step 4: Style & Appearance

Primary Color

Pick a primary color that matches your brand. You can enter any hex code or choose from the preset swatches.

Preset swatches available:

#101204 — Dark
#2792DC — Blue
#9CE6E6 — Teal
#ef4444 — Red
#f59e0b — Amber
#10b981 — Green
#8b5cf6 — Purple

Avatar Image

Upload a custom avatar that appears in the widget header and chat bubble. Supported formats: JPG, PNG, GIF — max 5MB.

The current avatar and any newly uploaded image are previewed live before saving.

Step 5: Features

Lead Collection Form

When enabled, a form appears before the user starts chatting — useful for capturing name, email, or other details upfront.

Toggle this on/off from the Features section of the Widget tab.

Show a consent checkbox that users must accept before starting the conversation. You can write custom consent text and even include links using Markdown syntax:

I agree to the [Privacy Policy](https://yoursite.com/privacy) and [Terms of Service](https://yoursite.com/terms).

The checkbox is optional by default — enable it when you need explicit opt-in (e.g., for GDPR compliance).

When enabled, messages sent through the widget are also routed to your Communications inbox inside Myndy. This lets your team monitor, respond to, or escalate widget conversations from one place.

Preview

The Widget tab includes a live Preview panel on the right side — switch between Mobile and Desktop views to see exactly how the widget will look on your site before going live.

Troubleshooting

Confirm the <script> tag is included on the page
Make sure the agent_id attribute is set to your actual agent ID (not a placeholder)
Check your browser console for JavaScript errors
Verify the page is being served over HTTPS — the widget may be blocked on plain HTTP

Check that your agent is active and published
Verify your internet connection
Open the browser console and look for network errors

Avatar not updating

Confirm the file is JPG, PNG, or GIF and under 5MB
Save the widget settings after uploading — changes aren't applied until saved

Support

Need help? Contact our support team or open a ticket from the support page.

Widget Integration Guide