How to add live chat to your website (step by step)

A live chat lets visitors ask a question at the exact moment they have it – on the pricing page, in the checkout, in the middle of your docs. Adding one is less work than most people expect: for almost every website it comes down to one script tag in the page header.

This guide walks through the whole thing with asktrix as the example: installing the widget, getting it to look and sound like you, deciding when it shows, and what to set up so that nobody waits for an answer.

What you need

• Access to your website's code or to a setting for "header code" (WordPress, Shopify, Webflow and most site builders have one).
• A free asktrix workspace. The Free plan includes the chat widget, the shared inbox and contacts for two team members.

That's it – no server, no plugin to keep up to date.

Step 1: Copy your widget snippet

After creating your workspace, open Settings → Channels → Installation. You will find a snippet like this, already filled in with your workspace ID:

<script async src="https://asktrix.org/widget.js"
        data-workspace="YOUR_WORKSPACE_ID"></script>

The async attribute means the script loads in the background and doesn't hold up your page.

Step 2: Paste it before </head>

The snippet belongs in the <head> of every page, right before the closing </head> tag. Where exactly that is depends on your platform:

Platform	Where the snippet goes
Plain HTML	The template or file loaded on every page, before </head>
WordPress / WooCommerce	Appearance → Theme File Editor → header.php, or a header-code plugin like "WPCode"
Shopify	Online Store → Themes → … → Edit code → layout/theme.liquid
Webflow	Site Settings → Custom Code → "Head Code", then republish
Next.js	app/layout.tsx with next/script

There are detailed guides for WordPress and Shopify. For React and Next.js, the installation page in the app shows a ready-to-copy component.

Step 3: Check that it works

Save, clear your cache if you use a caching plugin or CDN, and open your website. The chat button appears in the bottom right corner. Send yourself a test message – it lands in the asktrix inbox right away.

Tip: before installing on your live site, open the demo page from the installation settings. It shows your widget on a sample page, so you can try colours and texts first.

Step 4: Make it look and sound like you

A chat widget that looks like a foreign add-on gets fewer messages. Spend five minutes here:

• Colour and style: pick your brand colour, a light, coloured or dark header, and light, dark or automatic mode.
• Header text and welcome message: the first thing visitors read. Keep the header short (it has room for 60 characters) and use the welcome message (up to 280) to say what you can help with. Our post on greeting messages has templates.
• Language: the widget comes in eight languages and picks the visitor's browser language automatically – or you set a fixed one. Every text can be adjusted per language.
• Position: left or right, with an extra offset if a cookie banner or another button sits in the corner.

Step 5: Decide when the chat shows

Live chat only feels "live" if somebody answers. Decide what happens when your team is away:

• Hide when everyone is away – the widget only shows while at least one teammate is online.
• Stay visible and collect messages – visitors leave their question and email; you reply later from the inbox. Turn on Ask for email so you can reach them.
• Let the AI agent answer – from the Start plan, the AI agent Trix answers from your help articles around the clock and hands over to your team when needed. It runs on your own API key, so you pay your AI provider directly.

On the Team plan you can also choose the pages where the widget appears, and block countries, languages or IP addresses.

Step 6: Invite your team

Invite colleagues by link from the team settings. Chats and – from the Start plan – emails land in one shared inbox, where you can assign conversations, leave internal notes and use saved replies. Install the web app on your phone to get push notifications for new messages.

Optional: tell the chat who your visitors are

If people log in on your site, pass their details to the chat with the JavaScript API (Start plan and up). Your team then sees who they are talking to:

window.asktrixReady = window.asktrixReady || [];
asktrixReady.push((trix) => {
  trix.identify({ email: "[email protected]", name: "Jane Doe" });
  trix.setData({ plan: "pro" });
  trix.addLabels("vip");
});

The queue works whether or not the widget has finished loading. Once it has, window.asktrix is available directly.

You can also open the widget from your own button (asktrix.open()), hide it on certain screens (asktrix.hide()) or record events (asktrix.track("signup")).

Common problems

The chat button doesn't appear. Clear the cache of your caching plugin, CDN and browser. Then check the page source: the snippet must be inside <head> on every page.

It shows on some pages only. Some themes use different headers for different templates. Make sure the snippet is in all of them, or use a header-code plugin that applies site-wide.

It disappears in the evening. You probably turned on "hide when everyone is away". That's working as intended – or switch it off and let visitors leave a message.

Summary

1. Copy the snippet from Settings → Channels → Installation.
2. Paste it before </head> on every page.
3. Check, then adjust colours, greeting and language.
4. Decide what happens when nobody is online.
5. Invite your team.

Ready? Create a free workspace and you'll have live chat on your website before your coffee gets cold.