BigCommerce

Use Script Manager for site-wide chat, and Stencil for product-page try-on.

1. Site-wide chat (Script Manager)

  1. Admin → Storefront → Script Manager → Create a Script.
  2. Name: askthe.bot chat. Location: Footer. Pages: All pages. Type: Script.
  3. Paste:
<script async src="https://askthe.bot/embed.js" data-agent="YOUR-SLUG"></script>

2. Try-on on product pages (Stencil)

Edit templates/components/products/product-view.html in your Stencil theme. Add this near the add-to-cart block:

<button type="button" id="atb-tryon" class="button button--primary"
  style="margin-top:12px;width:100%">Try it on</button>

<script async src="https://askthe.bot/tryon.js"
  data-agent="YOUR-SLUG" data-auto-button="false"></script>
<script>
  document.getElementById('atb-tryon').addEventListener('click', function () {
    window.AskTheBotTryOn && window.AskTheBotTryOn.open({
      productImage: {{json product.main_image.data}},
      productLabel: {{json product.title}},
      productUrl: window.location.href,
    });
  });
</script>

3. Variant-aware (Stencil)

BigCommerce fires the product-options-change event when an option changes. Update the image at click time:

<script>
  var current = { image: {{json product.main_image.data}}, label: {{json product.title}} };
  document.addEventListener('product-options-change', function (e) {
    if (e.detail && e.detail.image) current.image = e.detail.image;
  });
  document.getElementById('atb-tryon').addEventListener('click', function () {
    window.AskTheBotTryOn.open(current);
  });
</script>

Troubleshooting

  • Script Manager not showing on PDPs: check the page rule includes Product pages.
  • "Domain not allowed": add your .mybigcommerce.com domain AND your custom domain in agent Profile → Allowed domains.

Back to embed · try-on.