Install the chat widget
Paste one script tag into your site. Works with any CMS, shop system or framework.
To install the widget, copy the code under Settings → Channels → Installation and paste it before the closing </head> tag on every page of your website.
The code looks like this. Your workspace ID is already filled in:
<script async src="https://asktrix.org/widget.js" data-workspace="YOUR_WORKSPACE_ID"></script>
Reload your site. The chat button appears in the bottom right corner. Send yourself a message: it lands in your Inbox within a second.
Try it before you go live
Next to the code there's Open demo page. It shows your widget on a sample website, so you can check colors and texts without touching your own site.
WordPress, Shopify and other platforms
There's no plugin or app to install. On every platform you paste the same script tag:
| Platform | Where the code goes |
|---|---|
| WordPress, WooCommerce | Appearance → Theme File Editor, header.php, before </head>. A code snippet plugin such as WPCode works too. |
| Shopify | Online Store → Themes → … → Edit code, layout/theme.liquid, before </head> |
| Webflow | Site Settings → Custom Code → Head Code, then republish |
| Next.js | app/layout.tsx, loaded with next/script and strategy="afterInteractive" |
| React | A small component that appends the script once, rendered in your root component |
| Plain HTML | The template that every page uses, before </head> |
The installation page has the exact code for each of these, with your workspace ID filled in.
The widget doesn't show up
Check these in order:
- Cache. WordPress and shop systems often serve cached pages. Clear the cache of your site and your CDN, then reload.
- The code is on the page. Open your site, view the page source and search for
widget.js. If it's not there, the theme or template you edited isn't the one in use. - Allowed domains. If Settings → Channels → Identity & protection → Allowed domains is on, the widget only loads on your main domain and the additional domains under Settings → Workspace → General. Add staging or shop domains there.
- Visibility rules. When & where it shows can hide the widget on certain pages, countries or languages. Behavior → Hide when everyone is away and Hide on mobile hide it as well.
- Content Security Policy. If your site sends a CSP header, the browser console names the blocked request. Allow
https://asktrix.orginscript-srcandimg-src,https://asktrix.orgpluswss://asktrix.orginconnect-src, and'unsafe-inline'instyle-src(the widget brings its own styles inside its shadow root).
Next steps
- Pass the name and email of logged-in users with the JavaScript API, so you know who you're talking to.
- Change color, greeting and launcher under Settings → Channels → Colors & look.