Website widget
Add the Bookbag chat widget to any website with a single script tag. Includes the embed snippet, Shopify and platform install guidance, styling, and domain controls.
View as MarkdownThe website widget is a floating chat bubble that opens an agent-powered conversation in the corner of your site. It's the fastest way to deploy — a single <script> tag, no build step, and it works on any website or platform that lets you add HTML.
Open your agent → Deploy → the Chat widget card → Manage → Embed. The snippet there already has your agent ID filled in.
Install the embed snippet
Copy this snippet and paste it just before the closing </body> tag of your site. Replace YOUR_AGENT_ID with the ID shown on the Embed tab.
<script src="https://app.bookbag.ai/widget/embed" data-agent-id="YOUR_AGENT_ID" defer ></script>
Reload your site — a chat bubble appears in the corner and answers from your agent's knowledge. The defer attribute keeps it from blocking your page load.
Optional attributes
The loader reads a few optional data- attributes so you can tweak appearance without touching the dashboard:
| Attribute | Default | What it does |
|---|---|---|
data-agent-id | — (required) | Which agent answers in the widget. |
data-color | #3b82f6 | Hex color of the chat bubble and header. |
data-position | right | Corner to dock to: right or left. |
<script src="https://app.bookbag.ai/widget/embed" data-agent-id="YOUR_AGENT_ID" data-color="#16a34a" data-position="left" defer ></script>
Install on Shopify
Shopify themes let you edit the layout that wraps every storefront page, so the widget appears site-wide once you add the snippet there.
- 1Open the theme code editorIn your Shopify admin, go to Online Store → Themes → ⋯ → Edit code on your active theme.
- 2Open theme.liquidUnder Layout, open theme.liquid — this template wraps every page of your store.
- 3Paste before </body>Scroll to the bottom and paste the Bookbag snippet immediately before the closing </body> tag.
- 4SaveSave the file and visit your storefront. The chat bubble appears on every page.
<!-- ... your theme markup ... -->
<script
src="https://app.bookbag.ai/widget/embed"
data-agent-id="YOUR_AGENT_ID"
defer
></script>
</body>
</html>Connect Shopify as a data source and enable Shopify actions so the agent can answer order-status and tracking questions. See Shopify integration and Shopify actions.
Install on other platforms
Add the snippet to your theme's footer.php before </body>, or use a plugin that injects scripts site-wide (for example, a "header & footer scripts" plugin) and paste the snippet into the footer field.
Style and content
The Manage view on the Chat widget card controls how the widget looks and what it says, without editing code:
- Color — accent color for the bubble and header (overrides
data-color). - Welcome message — the greeting shown when the widget opens.
- Suggested prompts — example questions customers can tap to start.
- Position — dock to the left or right corner.
- Branding — hide the "Powered by Bookbag" footer on eligible plans.
Dashboard settings are read from the agent's public configuration at load time, so changes apply on the next page reload — no need to re-copy the snippet.
Restrict to your domains
To keep your widget from being embedded on sites you don't control, set an allowed domains list in the widget settings. The widget only initializes when it's loaded from a domain on the list.
Include staging and www variants. If the list is set and the current domain isn't on it, the widget won't load.