> ## Documentation Index
> Fetch the complete documentation index at: https://boundbot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# WebChat
> Set up, customize, and embed the BoundBot WebChat website chat widget.
export const BrowserWrapper = ({src, alt, title, description, height = '280px', caption, imgStyle = {}, children, imagePadding = '0px'}) => {
const legacyDocsImagePrefix = '/images/';
const productionDocsImagePrefix = '/docs/images';
const rawSrc = typeof src === 'string' ? src : src && (src.src || src.default) || '';
const imageSrc = rawSrc.startsWith(legacyDocsImagePrefix) ? `${productionDocsImagePrefix}/${rawSrc.slice(legacyDocsImagePrefix.length)}` : rawSrc;
return
{src ? : children ? children : null}
;
};
WebChat is the fastest way to put BoundBot in front of customers. It creates an embeddable widget backed by a public key, optional origin restrictions, and a customizable UI.
## Create a channel
Open Channels -> WebChat and click **Connect WebChat**.
Set these fields:
* **Bot**: the bot that should answer on this widget
* **Widget display name**: the channel label shown inside setup and UI flows
* **Allowed origins**: optional list of domains that are allowed to embed the widget. If you are **unsure** of the exact origins or you are **testing locally**, leave this field **empty** so the widget is not blocked by a mismatch—this avoids connectivity and **Origin not allowed** issues until you lock in production domains.
If you finished onboarding, you may already have a default WebChat channel ready to review instead of creating a new one.
If you saved an incorrect origin or you are testing locally, keep **Allowed origins** empty to avoid **Origin not allowed** errors. Add origins only when you are ready to restrict embedding to specific production domains.
## What you manage on the channel page
From the WebChat channel table, you can manage:
* the bot assignment
* channel status
* public key usage
* allowed origins
* key rotation on supported plans
## Customize the widget
Open Settings -> Customize Widget or Chat Experience -> Customize.
You can change:
* theme
* height
* position
* border radius
* primary color
* bubble label
* bubble text color
* starter suggestions
The current customization flow also generates production iframe embed code for the selected WebChat channel.
## Test before embedding
Use Playground to test the exact bot and WebChat combination before you install the widget on a live site.
If a conversation is muted for human handoff, WebChat will stop sending AI replies in that thread until your team turns auto reply back on from Inbox.
## Embed on your site
When you are ready to install, use the embed guide in Embed WebChat. If your site runs on WordPress, you can also use the WordPress plugin.
When your production domains are known and stable, add them to **Allowed origins** early so only those sites can embed the widget. Until then, leaving the field empty keeps local and staging tests working without origin errors.
## Related pages
Install the widget on your site with the iframe or script pattern.
Test the live WebChat pipeline before you publish it.
Follow the fastest setup path from onboarding to a working website chat.
Keep the bot aligned with your site content before you send production traffic.
: children ? children : null}