Installation Guide

One script tag. Works on any website. Paste it before your closing </body> tag and you're done.

Looking for platform-specific guides? See our integration guides for step-by-step instructions for WordPress, Shopify, React, and more.

your-website.html

<script
  src="https://www.botembed.ai/widget.js?botId=YOUR_BOT_ID"
  data-theme="light"
  data-position="bottom-right"
  data-display-text="Chat with us"
></script>

Replace YOUR_BOT_ID with your actual bot ID from the dashboard.

Static HTML

The simplest method. Add the script tag to any HTML page right before the closing body tag.

index.html

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <!-- Your site content -->

  <script
    src="https://www.botembed.ai/widget.js?botId=YOUR_BOT_ID"
    data-theme="light"
    data-position="bottom-right"
  ></script>
</body>
</html>

This works for any static site — plain HTML, GitHub Pages, Netlify, or any hosting provider.

WordPress

Use a header/footer plugin (recommended) or paste directly into your theme files.

Option A: WPCode plugin (recommended)

Install and activate the WPCode (Insert Headers and Footers) plugin
Go to Code Snippets → Header & Footer
Paste your script tag into the Footer section
Save

Option B: Theme editor

Go to Appearance → Theme File Editor
Open footer.php
Paste the script tag before </body>

<script
  src="https://www.botembed.ai/widget.js?botId=YOUR_BOT_ID"
  data-theme="light"
  data-position="bottom-right"
></script>

Tip: Use a child theme if editing theme files directly, so updates don't overwrite your changes.

Shopify

Add the script to your theme's main layout file.

Go to Online Store → Themes → Edit code
Open theme.liquid
Paste before the closing </body> tag

theme.liquid

  <script
    src="https://www.botembed.ai/widget.js?botId=YOUR_BOT_ID"
    data-theme="light"
    data-position="bottom-right"
  ></script>
</body>

Squarespace

Use Squarespace's built-in code injection feature.

Go to Settings → Advanced → Code Injection
Paste the script tag into the Footer field
Click Save

<script
  src="https://www.botembed.ai/widget.js?botId=YOUR_BOT_ID"
  data-theme="light"
  data-position="bottom-right"
></script>

Note: Code injection requires a Squarespace Business plan or higher.

Wix

Add custom code through the Wix dashboard.

Go to Settings → Custom Code
Click + Add Custom Code
Paste the script tag
Set placement to Body – end
Apply to All pages
Click Apply

<script
  src="https://www.botembed.ai/widget.js?botId=YOUR_BOT_ID"
  data-theme="light"
  data-position="bottom-right"
></script>

Webflow

Add the script in your project's custom code settings.

Go to Project Settings → Custom Code
Paste the script into the Footer Code section
Publish your site to see the changes

<script
  src="https://www.botembed.ai/widget.js?botId=YOUR_BOT_ID"
  data-theme="light"
  data-position="bottom-right"
></script>

React / Vite

Add to your HTML file directly, or load dynamically with a hook.

Option A: index.html (simplest)

index.html

<script
  src="https://www.botembed.ai/widget.js?botId=YOUR_BOT_ID"
  data-theme="light"
  data-position="bottom-right"
></script>
</body>

Option B: useEffect hook

ChatWidget.tsx

import { useEffect } from 'react';

export function ChatWidget() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://www.botembed.ai/widget.js?botId=YOUR_BOT_ID';
    script.dataset.theme = 'light';
    script.dataset.position = 'bottom-right';
    document.body.appendChild(script);

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

  return null;
}

Render <ChatWidget /> once in your app root.

Next.js

Use the built-in Script component for optimized loading.

app/layout.tsx

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://www.botembed.ai/widget.js?botId=YOUR_BOT_ID"
          strategy="afterInteractive"
          data-theme="light"
          data-position="bottom-right"
        />
      </body>
    </html>
  );
}

Works with both the App Router and Pages Router. Place in your root layout or _app.tsx.

Vue / Nuxt

Add to your HTML entry point or load dynamically in a component.

Vue 3 (Vite)

index.html

<script
  src="https://www.botembed.ai/widget.js?botId=YOUR_BOT_ID"
  data-theme="light"
  data-position="bottom-right"
></script>
</body>

Nuxt 3

nuxt.config.ts

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://www.botembed.ai/widget.js?botId=YOUR_BOT_ID',
          'data-theme': 'light',
          'data-position': 'bottom-right',
          body: true,
        },
      ],
    },
  },
});

Angular

Add to your index.html or inject programmatically.

Option A: index.html (simplest)

src/index.html

<script
  src="https://www.botembed.ai/widget.js?botId=YOUR_BOT_ID"
  data-theme="light"
  data-position="bottom-right"
></script>
</body>

Option B: Programmatic injection

app.component.ts

import { Component, OnInit, Renderer2, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>',
})
export class AppComponent implements OnInit {
  constructor(
    private renderer: Renderer2,
    @Inject(DOCUMENT) private doc: Document
  ) {}

  ngOnInit() {
    const script = this.renderer.createElement('script');
    this.renderer.setAttribute(script, 'src',
      'https://www.botembed.ai/widget.js?botId=YOUR_BOT_ID');
    this.renderer.setAttribute(script, 'data-theme', 'light');
    this.renderer.setAttribute(script, 'data-position', 'bottom-right');
    this.renderer.appendChild(this.doc.body, script);
  }
}

Customization Options

Control the widget's appearance with these data attributes on the script tag.

Attribute	Values	Default	Description
`data-theme`	`"light"` \| `"dark"`	`"light"`	Widget color theme
`data-position`	`"bottom-right"` \| `"bottom-left"` \| `"top-right"` \| `"top-left"`	`"bottom-right"`	Widget placement on the page
`data-display-text`	Any string	none	Text label shown next to the chat bubble

Example with all options

<script
  src="https://www.botembed.ai/widget.js?botId=YOUR_BOT_ID"
  data-theme="dark"
  data-position="bottom-left"
  data-display-text="Need help?"
></script>

Ready to add a chatbot to your site?

Get Your Embed Code