# 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:

```html
<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**.

---
Source: https://localhost:3100/help/en/install-the-chat-widget