Widget Embed — Put Your Bot on Your Website

Widget Embed — Put Your Bot on Your Website

The Widget Embed page (Dashboard → Widget Embed) gives you the code that puts your bot on your site, plus controls to keep it secure. This guide covers everything on that page. For how the widget looks and behaves, see Chatbot Setup.

---

The Embed Code

At the top of the page is your embed snippet:

<script src="https://botaura.app/widget.js" data-business-id="YOUR_BUSINESS_ID"></script>

Click Copy Code and paste it into your website's HTML, just before the closing </body> tag. The widget appears as a floating button (bottom-right by default; you can move it to the left in Chatbot Setup). Your unique Business ID is shown at the bottom of the page and is already filled into the snippet.

Test Before You Ship

Click Test Widget on This Page to inject the widget into the dashboard so you can open it and chat, without touching your website. Once you've confirmed it works, add the code to your live site.

---

Domain Whitelist

For security you can restrict which domains are allowed to load your widget. In the Domain Whitelist section:

1. Type a domain (e.g. mystore.com) and click Add Domain.
2. Each added domain is listed with the date it was added.
3. Remove a domain with the trash icon — you'll be asked to confirm, because the widget will stop working on that domain immediately.

• Leave the list empty to allow the widget on any domain (the default).
• Subdomains of a whitelisted domain are allowed too.
• If you add domains and forget to include the one your site actually runs on, the widget won't load there — add it, and it works again within moments.

---

Platform-Specific Installation

Plain HTML

1. Open your site's HTML file.
2. Find the </body> tag near the bottom.
3. Paste the embed code just above it and save.

WordPress

1. Go to Appearance → Theme Editor.
2. Select footer.php.
3. Paste the code before </body> and click Update File.

Prefer not to edit theme files? Use a plugin like "Insert Headers and Footers" and paste the code into the footer box. Note: if you run a WooCommerce store, you may not need the widget script at all — the native WooCommerce plugin can add the bot for you.

Shopify

1. Go to Online Store → Themes.
2. Click Actions → Edit code.
3. Open theme.liquid and paste the code before </body>, then Save.

---

Content Security Policy (CSP)

Only relevant if your website sets a Content Security Policy. A strict CSP will block the widget from loading. Add https://botaura.app to these directives:

script-src  ... https://botaura.app;
connect-src ... https://botaura.app;
frame-src   ... https://botaura.app;
img-src     ... https://botaura.app data:;

• script-src — loads the widget script (required)
• connect-src — widget API calls (token & settings)
• frame-src — the chat window iframe (use child-src on older browsers)
• img-src — the widget button icon

Keep your existing sources and simply append https://botaura.app to each. Use the exact domain (not a preview URL). If your browser console shows "violates the following Content Security Policy directive", this is the fix.

---

How Sessions & Security Work

Each visitor gets a unique session; the conversation persists while the browser tab is open. The widget authenticates with a short-lived token that refreshes automatically, so visitors never see a login. The domain whitelist plus token auth mean your widget can't be embedded on sites you didn't approve. More in Security & Privacy.

---

Troubleshooting

• Widget doesn't appear — confirm the script is before </body>, that your domain is whitelisted (or the list is empty), and that no CSP is blocking it.
• CSP console error — apply the CSP directives above.
• Works locally but not live — the live domain must be whitelisted; local domains like localhost don't need to be.
• Something breaks only on certain browsers — check Dashboard → Widget Errors, where the widget logs JavaScript errors from visitors' browsers for debugging.

---

Related

• Chatbot Setup — customize the widget's look and personality
• Product Catalog — power product cards in chat
• Security & Privacy — how the widget stays safe