Embed the widget

Script tag, iframe and JavaScript controls.

Chat bubble #

The default integration adds a floating launcher to the corner of every page. It lazy-loads the chat iframe on first open so it has no impact on page speed.

html

<script>
  window.SupportAiConfig = {
    chatbotId: "YOUR-BOT-ID",
    position: "right" // or "left"
  };
</script>
<script src="https://supportai.co.uk/embed.js" defer></script>

Option	Type	Description
`chatbotId`	string	Required. The agent to load.
`position`	"right" \| "left"	Which corner the launcher sits in. Default right.
`baseUrl`	string	Override the host the iframe loads from. Only needed for self-hosted deployments.

Colours, avatar, launcher icon and the welcome message are configured per agent under Styles, so you never have to redeploy your site to change them.

JavaScript controls #

Once loaded, window.SupportAi lets you open the widget from your own buttons or after an event.

document.querySelector("#help").addEventListener("click", () => window.SupportAi.open());

window.SupportAi.close();
window.SupportAi.toggle();

Inline iframe #

Embed the full chat surface inside a page — useful for a dedicated “Help” page or inside a logged-in portal.

html

<iframe
  src="https://supportai.co.uk/chatbot-iframe/YOUR-BOT-ID"
  width="100%"
  height="700"
  style="border:0;border-radius:16px"
  allow="clipboard-write"
></iframe>

Public widget config #

If you’re building your own UI you can read the agent’s public styling and welcome copy without authentication.

bash

curl https://supportai.co.uk/api/v1/widget/YOUR-BOT-ID

Allowed domains

Under Settings → Embed websites you can restrict which origins may load the widget. Requests from other origins receive a 403.

Single-page apps #

The script is idempotent — include it once in your root HTML. In React/Next.js, add it to the root layout with strategy="afterInteractive". Navigations inside your SPA keep the conversation open.