1. Home
  2. Helpie
  3. AI Chat
  4. Chat Widget

Chat Widget

The chat widget is the little bubble in the bottom-right corner of your site — the door your visitors knock on. Behind it sits Helpie’s AI assistant, which answers questions using only the content already published on your site, and hands anything it can’t answer to you as a ticket.

This page covers switching the widget on, choosing how the bubble looks, setting the opening greeting, and what your visitors actually experience once it’s live.

Switching It On (and Why It Starts Off)

The widget ships off by default, and that’s deliberate. Off is calibration mode: you can connect your API key, index your content, and have full test conversations in the AI Tester (Helpie > Settings > AI Tester) without a single visitor seeing anything. When the answers feel right, you flip one switch and go live.

That switch is the Publish chat to customers feature toggle — find it in Tracksies > Settings > Features, under the Helpie module (the features page covers the whole toggle family). Before turning it on you’ll want:

  1. An Anthropic API key saved and tested — see Connecting the AI
  2. A spend cap set, even a small one — also covered in Connecting the AI
  3. Your content indexed — see The Knowledge Base

Once enabled, the bubble appears on every front-end page. The widget’s script loads at the very end of the page, so it never slows your site down while it renders, and it’s written in plain JavaScript with no library dependencies — it works with any theme or page builder.

How the Bubble Looks

Under Helpie > Settings > AI, the Chat widget appearance section gives you three Chat bubble style options:

  • Icon on disk — a filled circle in your primary brand colour with a white message icon. The standard chat-bubble look, and the default.
  • Icon — the message icon floats on its own in your primary brand colour, no disk behind it. Cleaner against busy backgrounds.
  • Uploaded — your own SVG or PNG, shown as-is. SVG is preferred (it scales crisp, and tints to your brand colour automatically when the SVG uses fill="currentColor"). PNG works too — minimum 96×96, recommended 256×256 square with a transparent background. Only upload SVGs from sources you control, since SVG files can contain JavaScript.

The same section has the Chat panel header text field — the line shown at the top of the open chat panel. The default is “Hi! How can we help?” Keep it short; the panel is narrow on mobile.

The colours themselves come from the Designer, like everything else in the Tracksies family. Tracksies > Designer has a Chat Widget card with fine-grained controls: bubble disk, bubble icon, AI message background and text, customer message background and text. Every field falls back to a sensible default drawn from your existing brand colours, so you only override what you want to control. Corners, shadows, and surfaces come from the main Interface tab.

The Opening Greeting

When a visitor opens the chat, the first message they see is the greeting — and here’s a detail worth knowing: it’s a plain, static message. No AI call is made to produce it, so it costs nothing, appears instantly, and always says exactly what you wrote.

Set it in the Opening greeting field under Helpie > Settings > AI. Leave it blank and Helpie composes one for you from your assistant’s name and your site name — something like “Hi! I’m Helpie, Your Store’s assistant — ask me anything and I’ll find it fast, or I can pass your question to the team.”

The greeting, the assistant’s name, and its tone of voice all live together in the persona settings — see The Assistant’s Persona.

What Visitors Experience

A visitor types a question. Helpie searches your indexed content, and one of three things happens:

It answers, with receipts. The reply is grounded in your actual pages, and underneath it the visitor sees links to the sources the answer came from — the product page, the policy page, the blog post. Each source also shows the matching passage from that page, with your customer’s words highlighted, so they can see at a glance why that link is the answer. They can click straight through. The assistant is instructed to keep answers brief and lead with the most relevant page, because the link usually is the answer.

It asks a clarifying question. When your content doesn’t quite pin down what the visitor means, the assistant asks one short question to narrow it down — one, never two in a row. Once the visitor answers, it either answers properly or moves on to a ticket.

It offers to pass the question to you. When it genuinely can’t help — the content isn’t there, or the topic is one it declines by design (legal, medical, or financial questions get routed to a human rather than answered by an AI) — a short form appears right in the chat. Alongside name and email, it asks the visitor two things: whether to include the chat conversation so far (ticked by default, because nobody enjoys restating their case to a new person), and whether there’s anything else to add for the team (optional). Submitting it creates a ticket; the shared conversation arrives as the first message in the thread, and the visitor can see it in their own ticket view too — both sides are looking at the same story. Your team opens the ticket already knowing what was asked and what the assistant said; nothing is lost, and nothing is repeated.

If you’ve set a spend cap and it’s been reached, the widget doesn’t error or embarrass you — it politely pauses AI answers and shows the fallback you chose in the AI Spend settings: the ticket form, a direct-contact form, or hiding the widget entirely until the cap resets. The ticket and direct-contact forms ask the same two questions as the escalation form above, so the conversation still travels with the request when the visitor wants it to.

Common Questions

Does the widget slow my site down?
No — the script is deferred to the end of the page, so your content renders first. The bubble appears once the page has finished loading.

Can I have the chat widget without the ticket queue?
Yes. The chat widget, the customer portal, and the admin helpdesk are separate feature toggles — run any combination. With the helpdesk off, escalations arrive as email notifications instead; see Helpdesk Emails for how that inbox mode works.

Does every visitor message cost me money?
Each AI-generated answer uses your own Anthropic API key, yes — the greeting doesn’t, and neither does opening the widget. Connecting the AI covers costs and spend caps honestly.

Why does the assistant sometimes refuse a question that seems reasonable?
It only answers from your published content. If the answer isn’t on your site, it won’t guess — it offers a ticket instead, and that question shows up in the Content Prospector as a nudge to write the missing page.

How can we help?