AI Assistant

Chat Widget Appearance, Styling & Embedding

Style your live chat widget to match your website: configure color palettes, bubble icons, corner roundness, screen positions, and external script embedding.

Overview of Chat Widget Customization

The chat widget appears automatically on your BusinessPlus storefront and can also be embedded into any external website (e.g. WordPress, Webflow, Shopify, or custom HTML) using a lightweight JavaScript snippet.

Visual Styling Options

Customize the widget appearance in Dashboard -> Settings -> Site Settings -> AI Assistant:

Brand Colors: Set `primary_color` (header and user bubbles), `assistant_bubble_color`, and `header_text_color`.
Bubble Launcher Icon: Choose between "Chat" (speech bubble), "Headset" (support headphones), "Bot", or "Sparkles" launcher icons.
Screen Position: Select "bottom-right" (default) or "bottom-left" screen placement.
Typography & Border Radius: Select from 15 Google Fonts and adjust corner roundness (`border_radius`) from 4px to 24px.

Embedding on External Websites

To embed the live AI chat widget on an external website, add the following script tag before the closing `` tag of your HTML:

Allowed Domains & CORS Whitelisting

For security, external sites embedding your widget must be listed in your site's "Allowed Domains" settings (Dashboard -> Settings -> Domains) to allow cross-origin API communication.