Magento / Adobe Commerce

1. Site-wide chat bubble (no code)

1. Admin → Content → Blocks → Add New Block.
2. Identifier: askthebot_embed. Switch the editor to Show / Hide Editor (raw HTML).
3. Paste:

<script async src="https://askthe.bot/embed.js" data-agent="YOUR-SLUG"></script>

4. Save, then go to Content → Widgets → Add Widget.
5. Type: CMS Static Block. Display on: All Pages. Container: Before Page Footer. Pick askthebot_embed. Save.

2. Try-on button on product pages

Override view.phtml in your theme. Path:
app/design/frontend/<Vendor>/<theme>/Magento_Catalog/templates/product/view/addtocart.phtml

<?php /** @var \Magento\Catalog\Block\Product\View $block */
$product = $block->getProduct();
$img = $block->getImage($product, 'product_page_image_large')->getImageUrl();
$title = $product->getName();
?>
<button type="button" id="atb-tryon" class="action 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_encode($img) ?>,
      productLabel: <?= json_encode($title) ?>,
    });
  });
</script>

3. Configurable products

Magento's configurable product widget fires a change event on#product_addtocart_form. Listen for it and update the image.

require(['jquery'], function ($) {
  var imgEl = document.querySelector('.fotorama__active img, .product-image-photo');
  document.getElementById('atb-tryon').addEventListener('click', function () {
    window.AskTheBotTryOn.open({
      productImage: imgEl ? imgEl.src : defaultImg,
      productLabel: document.querySelector('.page-title .base').textContent.trim(),
    });
  });
});

Cache

After saving the block / widget, flush Page Cache:bin/magento cache:flush page_cache.

Troubleshooting

• CSP blocked: add askthe.bot to script-src and connect-src in your CSP config.
• "Domain not allowed": add your storefront domain(s) in agent Profile → Allowed domains.

Back to embed · try-on.