Install the widget

Open Integration in your website workspace, select a Live chatbot, then copy the snippet for your platform. The snippet contains the widget script URL, chatbot ID, and API URL for your installation.

HTML or a custom site

Select the HTML tab and copy the snippet.
Paste it into a shared page template just before </body>. If your site uses separate HTML files, add it on each page where the widget should appear.
Publish your changes and open the public page to check for the launcher.

Your generated script will look like this.

<script
  src="https://cdn.sutracore.space/BodhaBot/assets/embed.min.js"
  data-widget-origin="https://bodhabot.sutracore.com"
  data-bot-id="YOUR_BOT_ID"
  data-api-url="https://bodha.sutracore.com"
  defer
></script>

data-widget-origin tells the script, which loads from the CDN, where to find the chat window, launcher icon, and greeting sound. Keep it in the snippet.

The script uses data-api-url and data-bot-id to fetch the launcher color and avatar. It loads the chat window on first open. If your site restricts scripts with a content security policy, allow the CDN asset directory for the launcher and its deferred panel script.

Optional settings

Attribute	Effect
`data-position="left"`	Shows the launcher on the left. The default is right.
`data-require-login="false"`	Skips the name and email screen.
`data-teaser="Need help?"`	Changes the greeting bubble text. Use `"false"` to hide the bubble and its sound.
`data-open="true"`	Opens the chat when the page loads.
`data-auto-init="false"`	Waits for you to call `BbChat.init()`.

Control the widget from JavaScript

After the script loads, use the BbChat object.

BbChat.open();
BbChat.close();
BbChat.toggle();
BbChat.init({ position: "left" }); // Remount with new settings.
BbChat.destroy();

You can also set window.BbChatConfig = { ... } before the script loads. The same keys as the data attributes apply, for example { botId, apiUrl, position, teaser }.

Upgrading from an older snippet: the JavaScript API was renamed from KnowledgeChatbot to BbChat, and KnowledgeChatbotConfig to BbChatConfig. Update any custom buttons or scripts that call the old names. Visitors keep their saved chats.

Greeting sound

The greeting bubble plays a short chime when it appears. If the browser blocks autoplay, the chime plays after the visitor's first click on the page. Use data-teaser="false" to turn off both the bubble and the sound.

Next.js

Select React / Next.js in Integration.
Import Script from next/script in your root layout. Place the generated Script component inside the existing <body> and keep strategy="afterInteractive".
Deploy the site and check a route that uses that layout.

WordPress

Select WordPress in Integration and copy the snippet.
Add it to the site-wide footer field of a custom code plugin. If you maintain a classic child theme, you can place it in footer.php just before </body>. WordPress child theme guide
Save, clear the page cache if you use one, and check the launcher on a public page.

Shopify

Select Shopify in Integration and copy the snippet.
In Shopify admin, go to Online Store → Themes. Open the theme's actions menu and choose Edit code. Shopify theme code guide
In layout/theme.liquid, paste the snippet just before </body> and save. Shopify theme layouts
Preview the storefront and test the launcher. If you edited a draft theme, publish it when ready.

Use a staging or alternate domain

The workspace domain and its subdomains are allowed by default. If you are embedding on another domain, add that hostname under Settings → Allowed domains in the website workspace. For example, add preview.example.net to test a staging site hosted there.

Open the launcher and send a real question to confirm the full connection. Verify and troubleshoot