Install the widget

The snippet

Copy your snippet from Dashboard → Install and paste it just before the closing </body> tag on every page where the assistant should appear:

<script src="https://cdn.askmerra.com/v1/widget.js" data-site-key="pk_live_…" async></script>

What happens next:

1. The script (≈27 KB gzipped) waits until the page has loaded and the browser is idle.
2. It fetches your published widget configuration (cached for 60 seconds) and renders only the launcher button.
3. When a visitor opens the chat, it creates a protected session and starts streaming answers.

The widget renders inside a Shadow DOM: your CSS cannot break it and its CSS cannot leak into your theme.

Script attributes

Allowed domains

The site key only works on the domains listed in Settings → Allowed domains. shop.com also covers www.shop.com; *.shop.com covers every subdomain. Add staging domains here too. Requests from any other site are refused (origin_not_allowed).

Platform notes

WordPress / WooCommerce

Add the snippet with a header/footer plugin (e.g. “WPCode”) in the footer section, or in your child theme’s footer.php before wp_footer(). On product pages, AskMerra reads the JSON-LD that WooCommerce SEO plugins output.

Shopify

Online Store → Themes → Edit code → layout/theme.liquid, paste before </body>. A native Shopify app is coming (see platforms).

Magento 2

Content → Design → Configuration → (your store view) → HTML Head → Scripts and Style Sheets, or a layout XML block in your theme. A native module is coming.

Google Tag Manager

Use a Custom HTML tag firing on “All Pages” with the snippet. GTM removes data-* attributes in some setups. If so, use the settings object instead:

<script>
  window.AskMerraSettings = { siteKey: 'pk_live_…' };
</script>
<script src="https://cdn.askmerra.com/v1/widget.js" async></script>

Single-page apps (React, Vue, Next.js…)

Load the script once in your root layout. The widget persists across client-side navigation, re-checks show/hide path rules when the URL changes and keeps the conversation open across pages.

import Script from 'next/script';

<Script src="https://cdn.askmerra.com/v1/widget.js" data-site-key="pk_live_…" strategy="lazyOnload" />

Product-page context

On a product page, the assistant knows which product the visitor is looking at, so “is this good for oily skin?” just works. It reads the product from window.AskMerraSettings.productId if you set it, otherwise from the page’s schema.org JSON-LD (Product.sku, then productID, then mpn). The value must match the product’s external_id or sku in your catalog.

<script>
  window.AskMerraSettings = { productId: 'LUM-SE-01' };
</script>

Content Security Policy

If your site sends a CSP header, allow the widget script and the API:

Content-Security-Policy: script-src 'self' https://cdn.askmerra.com; connect-src 'self' https://api.askmerra.com; img-src 'self' https: data:

img-src must allow your own product image hosts. The widget injects its styles into its Shadow DOM; if your CSP restricts style-src, add 'unsafe-inline' for styles.

Verify the installation

Open your shop, then Dashboard → Install: it shows when and where the widget was last seen. If the launcher does not appear, open the browser console. The widget logs a clear warning (unknown site key, domain not allowed, shop paused).