Connect Web Widget to B6AI
Connect the Web Widget channel end to end, set up Web Widget, connect it in B6AI, publish your bot, and go live with confidence.
Overview
The Web Widget is the fastest channel to launch, a chat bubble you embed on your website with a small snippet, with no third-party account required. Your bot answers visitors instantly and hands off to agents.
You control its appearance and exactly which domains are allowed to load it.
What you can do on Web Widget
Connecting Web Widget lets your bot hold real conversations there, with full handoff to human agents when needed. On this channel you can:
- Add an on-site chat bubble to any page.
- Greet visitors and answer their questions with your bot.
- Hand off to a live agent in the Chats inbox.
- Pass page context and visitor attributes to personalize answers.
- Match your brand (colors, position, avatar) and work across mobile and desktop.
How the Web Widget channel works
B6AI hosts the widget. You paste a small script snippet just before your page’s closing </body> tag; it loads the widget, which talks to B6AI over a secure connection.
You choose which domains may load the widget, so it can’t be embedded on sites you don’t own.
Prerequisites
Have all of the following ready before you begin, each is required to complete the connection.
- Access to edit your website’s HTML, or a tag manager / CMS that can inject a script.
- A published bot to serve on the widget.
- The Enterprise Admin role in B6AI. No external account or credentials are needed.
Connect Web Widget in B6AI
Channels are configured per bot. In B6AI, open Bots and choose the bot you want on Web Widget, switch to its Channels tab, and click Configure on the Web Widget card. Complete the form (every field is explained below), Save, then toggle Enable to turn the channel on.
- In B6AI, open Bots, choose your bot, and go to its Channels tab.
- Click Configure on the Web Widget card.
- On the Appearance tabs, set the branding (bot name, title, subtitle, avatar) and theme (primary and secondary colors, chat bubble colors) and layout (placement, width, height).
- Under Allowed domains, add the site domain(s) that may embed the widget (leave blank to allow any).
- Save. Then open the Embed tab and copy the generated snippet.
<!-- B6AI Chat Widget — B6AI generates this exact snippet for your bot on the Embed tab -->
<script
src="https://bot.b6ai.ai/public/widget/loader/YOUR_BOT_ID?ak=YOUR_BOT_KEY"
async>
</script>| Field | What it is | Example value |
|---|---|---|
| Bot name / Title | The name and header title shown to visitors | YourCo Assistant |
| Subtitle | The subtext shown under the title | We usually reply in a minute |
| Bot avatar | The avatar image shown for the bot | A logo or icon URL |
| Primary / secondary color | Accent and header colors (hex) | #1b3bdb |
| Placement | Where the bubble sits | left, right or center |
| Width / height | Widget size | 380px / 600px |
| Allowed domains | Comma-separated domains allowed to embed the widget | www.yourco.com, shop.yourco.com |
Publish the bot to Web Widget
Once the channel is configured and enabled on the bot, publish the bot so customers get answers on Web Widget.
- Configure and Enable the Web Widget on the bot’s Channels tab, then Save.
- Open the Embed tab and copy the generated snippet.
- Paste it just before the closing </body> tag on every page that should show the widget, or add it once via Google Tag Manager or your CMS theme.
- Deploy your site; the bubble appears within a minute.
Verify with a test conversation
Confirm the channel is live end to end before sharing it with customers.
- Open your website in a private/incognito window.
- Click the chat bubble and send a message.
- Confirm the bot replies and that the conversation appears under Chats in B6AI.
- Test on a mobile device as well.
Troubleshooting
If messages are not delivered or the bot does not reply, match the symptom below to its cause and fix.
| Symptom / error | Likely cause | How to fix it |
|---|---|---|
| The bubble doesn’t appear | Snippet missing, or the domain isn’t allowed | Confirm the snippet is before </body> and add your domain under Allowed domains |
| “Domain not allowed” | The site isn’t in the allow-list | Add the exact domain (and any subdomains) in B6AI |
| An old version is cached | Browser or CDN cache | Hard-refresh the page; the widget auto-updates |
| No bot reply | No bot is published to the Web Widget | Publish a bot to the Web Widget channel |
Limitations
Keep these constraints in mind when designing conversations for Web Widget.
- The widget loads on your site, so a strict Content Security Policy must allow the widget script and its connection origin.
- One bot per widget instance: route within the bot for multiple use cases.
- Appearance options are configured in B6AI (not via arbitrary CSS).
Security & compliance
- Restrict Allowed domains to sites you own so the widget can’t be embedded elsewhere.
- If you use a Content Security Policy, allow the B6AI widget script and connection origin.
- Never pass secrets as visitor attributes, only non-sensitive context like page URL or a known customer id.
- Serve your site over HTTPS so the widget connection stays secure.
Recommendations
- Install via Google Tag Manager so you can update placement without editing code.
- Pass the page URL or a known customer id as attributes to personalize answers.
- Match the widget to your brand and write a helpful greeting.
- Configure off-hours behavior so visitors outside business hours get expectations set and can leave a request.