Install guide
Adding a chat assistant to a WooCommerce store
WooCommerce runs inside WordPress, so the tag goes in through a hook rather than into a template file. Doing it that way is what keeps the widget alive through theme updates, and it is also what keeps it off the pages where a shopper should not be distracted.
The tag
<script src="https://cdn.askably.xyz/w.js" data-key="pk_live_YOUR_KEY" defer></script>Your own key replaces the placeholder. You will find it on the install tab of the assistant.
The origin the page is served from has to be on the allowlist for that assistant, or nothing renders and the browser console says which origin was refused. An apex domain and its www are two different origins to a browser, so list both, along with any staging or preview host you want it to work on.
Where it goes on WooCommerce
A site-specific plugin or a code snippets plugin, hooking wp_footer. Not the theme editor.
Any self-hosted WordPress install running WooCommerce. Managed hosts that disable file editing still allow a snippets plugin, which is the recommended route anyway.
Step by step
- 1Install a code snippets plugin, or create a small site-specific plugin if you would rather not add one.
- 2Add a new snippet that runs on the front end only, and have it echo the tag on the wp_footer hook.
- 3Save and activate the snippet. WooCommerce fires wp_footer on shop, product, cart and account pages alike, so one snippet covers the whole store.
- 4If you want it off the cart and checkout, wrap the echo in a check for is_cart and is_checkout and return early.
- 5Purge every cache layer you run: the plugin cache, the host cache, and the content network in front of them.
- 6Load a product page in a private window and confirm the launcher appears.
What goes wrong on WooCommerce
Never paste it into the parent theme
The theme editor is the first place people reach for and the worst place to put it. A theme update replaces footer.php wholesale, and the tag goes with it. There is no error, no warning, and no entry in any log: the widget simply is not there any more.
A snippet on wp_footer lives in the database rather than in a theme file, so it survives updates, theme switches and staging refreshes.
Minification plugins rewrite script tags
Aggressive optimisation plugins combine, defer and sometimes rewrite third-party script tags. The two failure modes are a tag that loses its data-key attribute during a rewrite, and a tag delayed until first user interaction, which means the launcher never appears for anyone who does not scroll.
Add the loader to the exclusion list in whichever plugin is doing it. Every one of them has one.
Decide about the cart and checkout deliberately
Unlike a hosted store, WooCommerce lets you put the widget on the checkout, which raises a question hosted stores never have to answer: should you. A launcher over a payment form is a distraction from the one action you want, and an assistant that cannot see the cart cannot help with it anyway.
The usual answer is on for product, category and policy pages, off for cart and checkout.
Origins to allowlist
These are the origins a WooCommerce site is typically served from. List every one you want the assistant to answer on, including the ones only you visit.
- https://yourdomain.com
- https://www.yourdomain.com
- https://staging.yourdomain.com
How the tag behaves, wherever you put it
The rest of this is the same on every platform, so it is worth reading once rather than on each guide.
| One tag, nothing else | There is no second file, no stylesheet and no package to install. The tag is the whole install. |
|---|---|
| Where it goes | Immediately before the closing body tag. It works in the head too, because it defers, but the body keeps it out of the way of anything that measures render order. |
| data-key is required | Without it the loader stops and writes a warning to the browser console rather than rendering anything. |
| It finds itself | The loader reads the tag it was loaded from, and falls back to the first tag on the page carrying a data-key. Platforms that move or re-inject the tag do not break it. |
| It installs once | A second copy of the tag on the same page is ignored, so a template that renders twice does not produce two launchers. |
| Assets follow the tag | Everything else it needs is fetched from the same origin the tag was served from, so a proxy or a private domain needs no extra configuration. |
| The panel loads late | Only the small launcher is on the page at first. The conversation panel is fetched the first time a visitor opens it, in its own frame. |
| Styles cannot collide | The launcher renders inside a closed shadow root and the panel inside a frame, so nothing on the host page can restyle either, and neither can restyle the host page. |
Set up on WooCommerce for a particular trade
The tag is the same everywhere. What is not the same is which of your pages the assistant can read once it is running, and on WooCommerce that depends on what kind of site this is. These go one level further than this guide.
- For a bike shopFrame sizes are variation data rather than page text, and the workshop queue is not a product at all. Both are why a bike shop store answers badly by default.
- For a pharmacyProduct permalinks carry no category, so the pharmacy range cannot be excluded by path. And on this platform the checkout is yours to put a widget on.
- For a garden centreTen years of dated advice posts are still live, the consent banner holds the script back, and April ends up answering a November question.
- For a furniture retailerLead times hide in a custom field, spec sheets are PDFs in your uploads folder, and the checkout is often an enquiry form instead.
- For a fashion retailerThe launcher appears on My Account, where the customer can see their order and the assistant cannot. Returns live behind that same login.
Taking it off again
Deactivate the snippet, or delete the site-specific plugin. Then purge the caches again, because a cached page still holds the old markup.
Before you remove it
- Removing the tag stops the widget on that site. It does not delete the assistant, its material, or the enquiries it has already collected.
- If you are moving the widget to a different host rather than retiring it, add the new origin to the allowlist before you remove the old tag, or there is a window where neither works.
Questions
- Can it answer questions about a specific order?
- Not from the store itself. It answers from the material you index, so it handles your dispatch, returns and warranty policies well. Individual order lookups need a connected source containing those records, set up separately.
- Does it index product pages automatically?
- If you point it at your site, the crawl follows your own links and reads what a visitor would read, product pages included. It obeys your robots file, so anything you have blocked there stays unread.
- Why does the launcher appear on the front page but not on a product page?
- Almost always a caching layer serving an older copy of the product template, or an optimisation plugin excluding scripts on certain page types. Purge everything, then check the page source for the tag before looking anywhere else.
Keep reading
- Install on ShopifyOnline Store, then Themes, then the three dots beside your live theme, Edit code, then layout/theme.liquid.
- Install on BigCommerceStorefront, then Script Manager, then Create a Script.
- Install on Magento and Adobe CommerceContent, then Design, then Configuration. Edit the store view, open the Footer section, and use Miscellaneous HTML.
- Every install guideThe same one line of HTML, and where it goes on each platform.
Try it on your own material
Upload a document or point it at your site, paste one line of HTML, then ask it something only your business could answer.