How to Embed Ask Butler Chat on Any Website

Embed Ask Butler chat with one script tag

Ask Butler includes a client-side chat widget that can be added to any website with a small JavaScript snippet. You do not need React, Astro, WordPress plugins, or a custom frontend integration.

Basic embed

Add this script before the closing </body> tag on the page where you want the chat launcher to appear:

<script
  src="https://askbutler.site/widget.js"
  data-site-slug="faq"
  data-label="AI"
></script>

The data-site-slug value tells the widget which Ask Butler site and Knowledge Graph to use. In this example, the slug is faq, so the widget connects to the Ask Butler support site.

Local development example

If you are testing locally, point the script to your local client-site app and set the API base to your local backend:

<script
  src="http://localhost:4333/widget.js"
  data-site-slug="faq"
  data-api-base="http://localhost:3010"
  data-label="AI"
></script>

Available attributes

• data-site-slug: required. The public Ask Butler site slug, for example faq.
• data-api-base: optional. Use this for local development or staging APIs.
• data-label: optional. Changes the launcher label, such as AI or Help.
• data-title: optional. Sets the accessible title for the launcher and dialog.
• data-position: optional. Use bottom-right or bottom-left.

What happens after loading?

When a visitor opens the widget, it loads the site configuration for the slug, creates a chat session, and sends messages to the Ask Butler chat API. Replies are grounded in the connected site content and Knowledge Graph.

Troubleshooting

• If the launcher does not appear, confirm the script URL is reachable.
• If the console shows Missing data-site-slug, add the data-site-slug attribute.
• If chat cannot start locally, confirm data-api-base points to the running API server.
• Only include the widget once per page.