Installing the live chat widget on your website

The live chat widget is the same small embeddable script whether it's running on your own site or inside your Helmdesk-hosted client portal — there's no separate "public" version with fewer features.

Add the script tags

Add this just before the closing </body> tag on any page you want the chat bubble to appear on:

<script
  src="https://helmdesk.ca/widget.js"
  data-tenant="your-tenant-slug"
  data-api-url="https://api.helmdesk.ca"
></script>

Replace your-tenant-slug with your own tenant slug. That's the whole installation — no build step, no npm package, no iframe to size.

What loads immediately vs. on demand

The floating chat bubble appears as soon as the script loads, styled in your tenant's own brand color if you've set one under Settings → Branding. The actual chat panel — and the Socket.io connection behind it — only initializes once a visitor clicks the bubble open, so the widget has effectively no performance cost on a page a visitor never interacts with.

Multiple pages, one script tag

Add the same two attributes to every page you want chat available on. If your site is a single-page app, add it once to your root HTML template — the widget doesn't need to be re-initialized per route.

What a visitor sees

• A name field (optional — a visitor can start chatting anonymously).
• A typing indicator when an agent is responding.
• Their own message history, kept for that browser session.

Where agents see it

Chat sessions show up in real time in the dashboard's chat console for any online agent or super admin — provider roles only, since live chat is agent-facing infrastructure, not something a tenant admin logs into directly. A conversation can be escalated into a full ticket at any point if it needs to continue asynchronously past the live session.

Troubleshooting

The bubble doesn't appear at all. Open your browser's developer console and check for a failed request to data-api-url — this usually means the tenant slug is misspelled, or the page is blocking third-party scripts more aggressively than expected (a strict Content-Security-Policy header is the most common cause).

The bubble shows the wrong color. Branding is fetched once when the script loads. If you just changed your brand color in Settings, existing open tabs won't pick it up until reloaded — this isn't a caching bug, just when the fetch happens.