Getting started

Install the chat widget

Paste one script tag into your site. Works with any CMS, shop system or framework.

Updated on November 6th, 20262 min readAs Markdown

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:

  1. Cache. WordPress and shop systems often serve cached pages. Clear the cache of your site and your CDN, then reload.
  2. 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.
  3. 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.
  4. 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.
  5. Content Security Policy. If your site sends a CSP header, the browser console names the blocked request. Allow https://asktrix.org in script-src and img-src, https://asktrix.org plus wss://asktrix.org in connect-src, and 'unsafe-inline' in style-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.
Was this article helpful?

Related articles