Install the chat assistant on your website

Any website (HTML)

1. Open the HTML of your site, or the template every page shares (often a footer or layout file).
2. Paste the snippet just before the closing </body> tag.
3. Publish the change, then open your site: the chat button appears in the corner.

WordPress

1. Install and activate a header-and-footer code plugin, such as “WPCode”.
2. Open the plugin’s Header & Footer page (in WPCode: Code Snippets → Header & Footer).
3. Paste the snippet into the Footer box and save.

Avoid pasting it into your theme’s files: a theme update would remove it. WordPress.com sites need a plan that allows plugins.

Shopify

1. In Shopify admin, go to Online Store → Themes.
2. Next to your current theme, open the … menu and choose Edit code.
3. Open layout/theme.liquid and paste the snippet just before </body>.
4. Save.

If you change themes later, add the snippet to the new theme too.

Webflow

1. Open your project’s Site settings and go to Custom code.
2. Paste the snippet into Footer code and save.
3. Publish the site.

Custom code needs a paid Webflow site plan.

Wix

1. In your site’s dashboard, go to Settings and open Custom code (under Development & integrations).
2. Click Add Custom Code and paste the snippet.
3. Choose All pages and Load code once, and place it in Body – end.
4. Click Apply.

Wix allows custom code on Premium plans with a connected domain.

Squarespace

1. Open Website Tools → Code Injection (in older versions: Settings → Advanced → Code Injection).
2. Paste the snippet into Footer and save.

Code Injection needs a Squarespace Core plan or higher.

Google Tag Manager

1. In your container, create a new tag of type Custom HTML.
2. Paste the snippet.
3. Set the trigger to All Pages, save, then Submit and Publish the container.

Tag Manager adds the script after the page loads, so “Check now” can’t see it in your HTML. Open your site once and the status turns Live.

React / Next.js

1. Next.js: add the Script tag below to your root layout (app/layout.tsx), inside <body>.
2. Other React apps: render the component below once, near the root of your app.

// Next.js (app/layout.tsx)
import Script from 'next/script';

<Script src="https://aichatbotengine.com/w/v1.js" data-agent="pk_live_YOUR_KEY" strategy="afterInteractive" />

// Any React app
import { useEffect } from 'react';

export function ChatAssistant() {
  useEffect(() => {
    if (document.querySelector('script[data-agent="pk_live_YOUR_KEY"]')) return;
    const s = document.createElement('script');
    s.src = 'https://aichatbotengine.com/w/v1.js';
    s.async = true;
    s.dataset.agent = 'pk_live_YOUR_KEY';
    document.body.appendChild(s);
  }, []);
  return null;
}

Check that it’s live

Open your website once. The Install page in the dashboard then shows “Live on your-site.com” with when it was last seen. If your site isn’t on the allowed list, the page shows it under “Blocked sites” with a button to allow it.

JavaScript API

Once the snippet has loaded, window.AIChatbot is available:

// Open, close or toggle the chat from your own buttons
AIChatbot.open();
AIChatbot.close();
AIChatbot.toggle();

// Ask a question for the visitor (opens the chat)
AIChatbot.sendMessage('Do you deliver on weekends?');

// Tell the assistant who's chatting; shown with the conversation
AIChatbot.identify({ email: 'jane@example.com', name: 'Jane', external_id: 'user-42' });

// React to what happens
AIChatbot.on('message', ({ text }) => console.log('answered', text));
AIChatbot.on('lead', () => console.log('visitor left their details'));
AIChatbot.on('open', () => {});
AIChatbot.on('close', () => {});

// To use only your own button, hide ours:
// <script … data-launcher="none"></script>