> ## Documentation Index > Fetch the complete documentation index at: https://docs.bestchatbot.io/llms.txt > Use this file to discover all available pages before exploring further. # Web Widget > Embed BestChatBot as a chat widget on any website with its own dedicated knowledge base. # Web Widget Add a chat widget to your website so visitors can ask questions and get instant answers from your knowledge base. BestChatBot chat widget open on a real website showing a conversation ## What You Get * **One line of code**: paste a script tag and you're done * **Dedicated knowledge base** for your website * **Real-time streaming**: answers appear word by word * **Customizable colors** to match your brand * **Mobile friendly**: full-screen on small devices * **No impact on your site**: runs in an isolated Shadow DOM * **Response tracking**: all widget conversations appear in your dashboard *** ## Prerequisites Before adding the widget to your website, make sure you have: A BestChatBot account with an active workspace Content in your knowledge base (documents or URLs) Access to edit the HTML of the website where you want the widget Each workspace runs one widget. To manage multiple sites or brands, create one workspace per widget. *** ## Configure Your Widget Each workspace comes with **one web widget**, created automatically when you set up the workspace. You don't build it from scratch — you configure it. Click the **globe icon** in the sidebar to open your widget's configuration, organized in tabs: **Appearance**, **Quick links**, **Integrations**, **Slack**, **Installation & Security**, and **Preferences**. Open the **Appearance** tab to style your widget: * **Brand color**: your brand color in hex (e.g., `#F97316`), used for the launcher, send button, and accents * **Teaser color**: an optional separate accent for the proactive teaser — off uses your brand color * **Brand logo**: an optional image shown in the floating bubble and next to each bot reply (PNG, JPEG, or WebP, up to 512 KB) * **Greeting** and **Proactive message**: the welcome text and the proactive nudge shown to visitors Widget Appearance tab with brand color, teaser color, brand logo, greeting, and proactive message Click **Save Changes** to apply. To run a widget on more than one site or brand, create a separate workspace — each workspace has its own isolated knowledge base and its own widget. *** ## Get Your Embed Code Open the **Installation & Security** tab in your widget's configuration to find a ready-to-paste snippet: Embed Code dialog showing the script tag with instructions The snippet looks like this: ```html theme={null} ``` *** ## Install on Your Website Paste the snippet into your website's HTML, just before the closing `` tag: ```html theme={null} My Website ``` That's it. The widget will appear as a floating chat bubble in the bottom-right corner of your site. Never share or modify the `data-api-key` value. It's your widget's unique identifier. ### Platform-Specific Instructions 1. Go to **Appearance → Theme File Editor** (or use a plugin like "Insert Headers and Footers") 2. Open `footer.php` 3. Paste the snippet just before `` 4. Save changes Alternatively, use a plugin like **WPCode** to insert the snippet site-wide without editing theme files. 1. Go to **Online Store → Themes → Edit Code** 2. Open `theme.liquid` 3. Paste the snippet just before `` 4. Save 1. Go to **Settings → Custom Code** 2. Click **Add Custom Code** 3. Paste the snippet 4. Set placement to **Body - End** 5. Apply to **All Pages** 1. Go to **Settings → Advanced → Code Injection** 2. Paste the snippet in the **Footer** field 3. Save Add the script tag to your root layout or use the `next/script` component: ```tsx theme={null} import Script from 'next/script' export default function RootLayout({ children }) { return ( {children}