Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.toebox.ai/docs/llms.txt

Use this file to discover all available pages before exploring further.

ToeBox provides multiple ways to deploy the chatbot widget on your website.

​
Auto-injection on Shopify

When you create a chatbot in ToeBox, the widget script is automatically injected into your Shopify storefront. No manual code changes are needed. The script is loaded via Shopify’s app embed blocks, which means:
  • It works with all Shopify themes (Online Store 2.0 and legacy)
  • It does not require editing your theme’s theme.liquid file
  • It loads asynchronously and does not block page rendering
Make sure ToeBox’s app embed is enabled in your Shopify theme editor under Online Store > Themes > Customize > App embeds.

​
Script tag embed

If you need to manually embed the widget on a non-Shopify page or a custom landing page, use the script tag: 
<script
  src="https://your-store.toebox.ai/embed/chatbot.js"
  data-chatbot-id="your-chatbot-id"
  async
></script>
Replace your-store with your ToeBox subdomain and your-chatbot-id with the chatbot ID from your dashboard.

​
Finding your embed code

  1. Navigate to Chatbot in ToeBox
  2. Click on your chatbot configuration
  3. Click the Copy Embed Code button
  4. Paste the script tag into your page’s HTML

​
Manual embedding on custom pages

For more control, you can embed the widget in specific locations: 
<!-- Place in the <head> or before </body> -->
<script
  src="https://your-store.toebox.ai/embed/chatbot.js"
  data-chatbot-id="your-chatbot-id"
  data-position="bottom-right"
  data-primary-color="#303030"
  async
></script>

​
Configuration attributes

AttributeDescriptionDefault
data-chatbot-idYour chatbot ID (required)—
data-positionWidget position: bottom-right or bottom-leftbottom-right
data-primary-colorOverride primary colorFrom chatbot config
data-bubble-styleOverride bubble style: rounded, square, pillFrom chatbot config

​
Testing the widget

Before going live, test your widget thoroughly:
1

Preview in ToeBox

Use the built-in preview panel in the chatbot builder to see how the widget looks and responds.
2

Check your storefront

Visit your Shopify store in a browser. The widget should appear in the configured position.
3

Test on mobile

Open your store on a mobile device or use browser dev tools to verify the widget is responsive.
4

Test conversations

Send several messages to verify the agent responds correctly and that Shopify tools (product search, checkout) are working.
Use an incognito/private browser window when testing to simulate a first-time visitor experience.