Install the widget
Add the snippet with your publishable key and register your domains.
1. Add the snippet
Paste this into the <head> of every page, or right before </body>. The dashboard shows it with your key and our CDN address filled in.
<script>window.lockstock=window.lockstock||function(){(lockstock.q=lockstock.q||[]).push(arguments)}</script>
<script src="https://cdn.lockstock.example/w/v1/loader.js" data-key="pk_live_…" async></script>- The first line creates
window.lockstockearly, so JavaScript API calls made before the widget loads are queued, not lost. Keep it exactly as is — a strict Content Security Policy allows it by its hash. - The loader is under 5 KB. The rest of the widget loads only when a shopper focuses your search box or opens the chat — or, if you placed
<lockstock-search>, once the browser is idle. - If the widget cannot start for any reason, it stays inactive and your page is untouched.
2. Keys and domains
data-key is your publishable key. It is safe to put in the page: it only identifies your store and works only on your domains.
| Key | Starts with | Where it goes |
|---|---|---|
| Publishable, live | pk_live_ | The snippet on your production site |
| Publishable, test | pk_test_ | The snippet on a staging site |
| Secret | sk_ | Only your server, for the push API. Never put it in a page |
The widget works only on the domains you register. A request from any other origin is refused and the widget stays off there. Register every domain shoppers use, including www. and regional subdomains, in the dashboard under Domains. The Install page shows, for each domain, when the widget last loaded there.
3. Check it
A new installation starts off. Switch it to Only me and open your site with the preview link from the dashboard, adding &lockstock_debug=1, and look at the browser console: one line from the widget shows the launch mode, your group and whether the widget is active. Then launch it in stages.
If the line is missing or says the widget is inactive, see Troubleshooting.