How to Embed SiteBrain Widget

Complete guide to adding the AI chatbot widget to your website

Quick Start (3 Steps)

1

Get Your Embed Code

Go to your bot's Widget tab in the dashboard, enable the widget, and copy the embed code.

2

Paste Before </body> Tag

Open your website's HTML file and paste the code right before the closing </body> tag.

3

Test It!

Refresh your website and you'll see the chat bubble in the bottom-right corner. Click it to start chatting!

Example: Basic HTML Page

Here's a complete example of a simple HTML page with the SiteBrain widget embedded:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Awesome Website</title> </head> <body> <!-- Your website content here --> <h1>Welcome to My Website</h1> <p>This is my website content...</p> <!-- ✅ PASTE YOUR SITEBRAIN EMBED CODE HERE (before closing body tag) --> <script src="https://your-domain.com/widget.js" data-sitebrain-id="YOUR_BOT_PUBLIC_ID" async ></script> </body> </html>

Important: Always place the embed code right before the </body> tag to ensure your page content loads first.

WordPress Installation

Method 1: Using a Plugin (Recommended)

  1. Install "Insert Headers and Footers" plugin
  2. Go to Settings → Insert Headers and Footers
  3. Paste your SiteBrain embed code in the "Scripts in Footer" section
  4. Click Save

Method 2: Theme Customizer

  1. Go to Appearance → Customize
  2. Navigate to Additional CSS or Custom Code
  3. Look for a "Footer Scripts" or "Custom HTML" section
  4. Paste your embed code and click Publish

Shopify Installation

  1. Go to Online Store → Themes
  2. Click Actions → Edit code on your active theme
  3. Open Layout → theme.liquid
  4. Scroll to the bottom and find the </body> tag
  5. Paste your SiteBrain embed code right before </body>
  6. Click Save

Wix Installation

  1. Go to your Wix dashboard
  2. Click Settings → Custom Code
  3. Click + Add Custom Code
  4. Paste your SiteBrain embed code
  5. Name it "SiteBrain Chat Widget"
  6. Select Body - end as the placement
  7. Select All pages (or specific pages)
  8. Click Apply

React / Next.js Installation

For React or Next.js, add the script to your main layout or _document.js file:

// In your _document.js (Next.js) or index.html (React) <Script src="https://your-domain.com/widget.js" data-sitebrain-id="YOUR_BOT_PUBLIC_ID" strategy="lazyOnload" /> // Or using useEffect hook: useEffect(() => { const script = document.createElement('script'); script.src = 'https://your-domain.com/widget.js'; script.setAttribute('data-sitebrain-id', 'YOUR_BOT_PUBLIC_ID'); script.async = true; document.body.appendChild(script); }, []);

Customization Options

You can customize the widget appearance from the dashboard:

Widget Title

Change the header text shown in the chat window

Bubble Text

Customize the text shown in the floating chat bubble

Welcome Message

Set the first message users see when opening chat

Primary Color

Match the widget to your brand colors

Troubleshooting

Widget not showing up?

  • Check that the widget is enabled in your dashboard
  • Verify the embed code is placed before </body>
  • Clear your browser cache and refresh the page
  • Check browser console for JavaScript errors (F12)
  • Make sure your bot has crawled knowledge (Details tab)

Widget shows but no responses?

  • Ensure your bot's website has been crawled successfully
  • Check that the brain status is "ready" in the Details tab
  • Upload documents in the Documents tab for additional knowledge

Ready to Add the Widget?

Go to your bot's Widget tab and get your embed code!

Back to Dashboard