← All docs Embed & integrate

Embed the chat widget

Register a site domain, create a chatbot, copy the embed snippet, and verify on your own site.

Embedding the chat widget

This guide shows you how to put the BestAI chat widget on your website. It covers registering your domain, creating the chatbot, copying the embed code, and the five common installation methods. You should be able to follow it without any developer help.

If you have not signed up yet, start with the getting started guide.

What you can do

  • Register one or more website domains
  • Create a chatbot tied to each site
  • Copy a one-line embed snippet
  • Install the widget on HTML, WordPress, Shopify, Wix, or via Google Tag Manager
  • Confirm the widget is working

Step-by-step

1. Register your website domain

A workspace can have many sites, and each site can host one or more chatbots.

  1. Sign in to the admin and open Sites.
  2. Click Register site.
  3. Enter the domain in lowercase. You can use:
    • An exact match like acme-cafe.co.nz — only this domain is allowed.
    • A wildcard like *.acme-cafe.co.nz — any subdomain is allowed (for example www.acme-cafe.co.nz, shop.acme-cafe.co.nz).
  4. Optionally give it a display name so it is easier to spot in the admin.
  5. Click Save.

Wildcards do not include the bare root domain. If you want both acme-cafe.co.nz and www.acme-cafe.co.nz, register them separately or add a wildcard plus the root.

2. Create a chatbot

  1. Open Chatbots and click Create chatbot.
  2. Give it a name your team will recognise (for example “Front desk”).
  3. Select the site you registered in step 1.
  4. Optionally set a slug. We will create one from your name if you skip it.
  5. Click Save.

The detail page now shows your embed snippet at the top.

3. Copy the embed code

The Embed snippet card shows a single <script> tag, like this:

<script async
  src="https://widget.chat.yai.nz/widget.js"
  data-tenant="acme-cafe"
  data-site="acme-cafe.co.nz"
  data-chatbot="customer-service"></script>
AttributeWhat it is
data-tenantYour workspace ID.
data-siteThe exact domain you registered. If you used a wildcard, put the actual subdomain you are deploying on.
data-chatbotThe chatbot slug.

Click Copy to put it on your clipboard.

4. Paste the snippet on your site

You only need to paste the snippet once per page (or once in your shared template). Pick the option that matches your stack.

HTML / static site

Paste the snippet just before the closing </body> tag. Save and deploy.

WordPress

Two options:

  • Plugin — install Insert Headers and Footers (or any equivalent), open it, and paste the snippet into the Footer field.

  • Child theme — edit your child theme functions.php and add:

    add_action('wp_footer', function () {
    echo '<script async src="https://widget.chat.yai.nz/widget.js" '
       . 'data-tenant="acme-cafe" '
       . 'data-site="acme-cafe.co.nz" '
       . 'data-chatbot="customer-service"></script>';
});

Shopify

  1. Open your theme editor and click Edit code.
  2. Open layout/theme.liquid.
  3. Paste the snippet just before the closing </body> tag.
  4. Save.

Wix

  1. Go to Settings, then Custom Code.
  2. Click Add Custom Code.
  3. Paste the snippet, set Add Code to Pages to All pages, and Place Code in to Body - end.
  4. Save and publish.

Google Tag Manager

  1. Open your GTM workspace.
  2. Add a new tag, type Custom HTML.
  3. Paste the snippet.
  4. Set the trigger to All Pages.
  5. Submit and publish your container.

5. Test it

Refresh the page on your site.

  1. A small chat button should appear in the bottom corner.
  2. Click it. The chat panel opens.
  3. Type a message and press send. You should see a streaming AI reply.
  4. Sign in to the admin, open Conversations, and you should see the conversation you just had.

You do not need any extra CSS. The widget uses a Shadow DOM so it cannot affect or be affected by your site’s stylesheet.

6. Customise the look and the wording

Open the chatbot and go to the Widget tab. You can change:

  • Theme — primary colour, position (bottom left or right), button icon
  • Copy — title, subtitle, welcome message, input placeholder, teaser bubble, and up to five quick-reply chips

Changes appear in the live preview straight away. Click Save to push them out to your site. Visitors see the new settings within about 30 seconds.

Common questions

The chat button is not showing up.

Open your browser’s developer tools and look at the Network tab. You should see a request to widget.chat.yai.nz/widget.js and another to /public/widget-config.

  • If /public/widget-config returns 403, the page’s URL does not match a registered site. Open Sites in the admin and add the exact domain (or use a wildcard).
  • If it returns 404, one of data-tenant, data-site, or data-chatbot does not match. Compare each value with the values in the admin.

My website is a single-page app (Next.js, Nuxt, etc). Will the widget survive route changes?

Yes. The widget mounts at the top of the page once and is not unmounted by client-side routing.

Can I use the same chatbot on more than one website?

Each chatbot belongs to one site. To run the same persona on different domains, create a chatbot per site and reuse the same prompt.

Does the widget slow down my site?

The widget is a single JavaScript file, around 10KB gzipped, loaded asynchronously. It does not block page rendering and uses a Shadow DOM, so it cannot trigger reflows on your page.

What about visitor privacy?

The widget reads only what is needed to chat. Names, emails, and phone numbers entered into a lead form are stored against your workspace only. We comply with the Privacy Act 2020. Email hello@bestai.co.nz for a deletion request.

Do I need to bring my own LLM key?

No. The widget works out of the box on the platform key. If you want to use your own provider account, see the BYOK guide.

Next steps