Chat Widget — Embed Your Bot on Any Website

Chat Widget — Embed Your Bot on Any Website

The Botaura chat widget is a small button that appears on your website. When visitors click it, a chat window opens and they can talk to your AI assistant instantly. This guide covers embedding, customization, and troubleshooting.

---

Embedding the Widget

Go to Dashboard → Embed to get your embed code.

The Code

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

Copy this code and paste it into your website's HTML, just before the closing </body> tag. The widget will appear as a floating button in the bottom-right corner.

---

Platform-Specific Setup

Plain HTML / Custom Website

1. Open your website's HTML file
2. Find the </body> tag at the bottom
3. Paste the widget code just above it
4. Save and upload

WordPress

1. Go to Appearance → Theme Editor
2. Select footer.php from the right sidebar
3. Paste the widget code just before </body>
4. Click Update File

Alternatively, use a plugin like "Insert Headers and Footers" to add the code without editing theme files.

Shopify

1. Go to Online Store → Themes
2. Click Actions → Edit Code
3. Open theme.liquid
4. Paste the widget code just before </body>
5. Click Save

---

Customizing Appearance (Pro+)

Go to Dashboard → Bot Setup to customize every aspect of your widget:

Widget Button

• Position — left or right side of the screen
• Size — small (48px), standard (60px), or large (72px)
• Shape — circle, rounded, or square
• Custom icon — upload your own button image
• Bottom offset — adjust distance from the bottom edge

Chat Window

• Bot name — displayed in the chat header
• Avatar — your bot's profile picture
• Welcome message — the first message visitors see when they open the chat
• Header text and tagline — shown at the top of the chat window
• Brand color — affects the header and user message bubbles
• Tone — professional, friendly, or casual (affects how the AI writes)

Message Bubbles

• Bot bubble — background color and text color
• User bubble — background color and text color
• Border radius — small, medium, large, or full rounded corners

---

Domain Whitelist

For security, you can restrict which domains can load your widget. In Dashboard → Embed, add your allowed domains (e.g., mystore.com).

• Exact match and subdomain match are supported — adding mystore.com also allows shop.mystore.com
• Leave the list empty to allow the widget on any domain
• Local development domains (e.g., localhost) don't need to be whitelisted

---

How Sessions Work

Each visitor gets a unique session. The conversation history persists as long as the browser tab is open (stored in sessionStorage). If the visitor closes and reopens the tab, a new session starts.

The widget authenticates using a JWT token (generated automatically). The token expires after 1 hour and is refreshed seamlessly — visitors never notice.

---

What Visitors Experience

1. A chat button appears on your website (customizable position and style)
2. Clicking it opens the chat window with your welcome message
3. The visitor types a question
4. The bot streams a response in real-time (word by word)
5. If products are relevant, product cards appear with images, prices, and links (Pro+)
6. If the visitor shows buying intent, the bot gently asks for contact info (lead capture)

---

Product Cards (Pro+)

When a customer asks about products, the bot can show interactive product cards with:

• Product image
• Title and price
• Short description
• Link to the product page

Product cards are automatically generated from your product catalog. Make sure your products are added in Dashboard → Products (or imported via website crawl).

---

Widget Errors

If the widget encounters a JavaScript error on a visitor's browser, it's automatically logged. You can view these errors in Dashboard → Widget Errors — helpful for debugging compatibility issues across different browsers and devices.

---

Remove Branding (Pro+)

On the Free plan, the widget shows a small "Powered by Botaura" badge. On Pro and above, this is removed for a fully white-label experience.