Front Chat Explained: The Live Chat Widget for Websites

What Front Chat actually is

Front Chat is a chat widget you host on your own website that routes every message into a dedicated Front Chat inbox. Per Front's guide to setting up a Front Chat inbox, the widget "opens up to your site's visitors so they can get real-time help from you and your team," and Front then lets you manage those conversations alongside every other channel. It works on any website, on Electron web and desktop apps, and on mobile webpages.

The important framing: chat is just another channel feeding your Front shared inbox. A visitor typing in the widget produces the same object a customer emailing you does — a conversation that can be assigned, snoozed, tagged, commented on internally, and acted on by rules. That single-inbox model is the whole point of Front, and chat inherits all of it.

Creating the chat inbox

You create Front Chat as a channel on a new or existing inbox. The path is Settings (the gear icon) → select your workspace → Inboxes → Create inbox (or open an existing one) → Channels → Connect channel → Front Chat. During setup Front asks you a few things up front:

• Theme color — the accent color visitors see on the widget.
• Chatbot / automation — whether to attach a chatbot flow or use the default.
• Verification — a toggle to only accept messages from verified users, or to allow anonymous visitors.

That last toggle is the one decision worth thinking about before you ship. It determines whether anyone browsing your site can open a chat, or whether the widget only accepts messages from users you've authenticated.

Customizing the widget's appearance

Front Chat is styled from the channel's settings and previewed live as you edit. Beyond the theme color, you can adjust the header greeting, logo, and placement so the widget matches your brand. Front's Using Front Chat documentation notes that visitors can send and receive plain-text messages, click full URLs, and share attachments up to 25 MB, with typing indicators and "seen" indicators shown in the widget.

The screenshot below is the customize step in action — the theme-color picker on the left and a live preview of the branded widget on the right, including the visitor-facing monitoring-consent line.

Two things worth noting from that preview. First, the consent notice names the company (here, the test workspace "Popeye Sailors") — the widget surfaces who's on the other end. Second, the setup isn't one screen: Customize chat widget is followed by Automate with chatbot and Install on website, so appearance, automation, and deployment are deliberately separate steps.

Installing on your website

Installation is a copy-paste script tag. Open the Front Chat channel's Installation tab, copy the widget code snippet, and paste it before the closing </body> tag on your page. The snippet loads Front's bundle — <script src="https://chat-assets.frontapp.com/v1/chat.bundle.js"></script> — and initializes it with your channel's chatId. Nothing syncs into your Front Chat inbox until that snippet is live on the page.

For anything more dynamic than a static site, Front gives you cleaner options:

• Single-page apps (React, etc.): use the official front-chat-sdk package rather than the raw script, so the widget mounts and unmounts correctly across route changes.
• Mobile apps: embed the widget in a mobile webview following Front's mobile install guide.
• Logged-in users: identify them automatically by email or user ID using a verification secret and a computed user hash, so the visitor arrives already matched to a known contact.

Verified vs anonymous visitors

Who the person is — and how much you trust that — is the core targeting decision in Front Chat. There are two modes:

Anonymous visitors can chat without identifying themselves. Front assigns them an auto-generated placeholder name — the docs use examples like "Purple panda" — so the conversation still has a handle even when you know nothing about who's typing. Good for top-of-funnel sales and general questions; weaker for anything account-specific.

Verified users are authenticated by your site before the chat opens, using the verification secret and user-hash flow above. When a verified user (or any visitor who provides their email) starts a chat, Front matches them against your contacts and CRM integrations — Salesforce, HubSpot, Pipedrive, and Zoho — so the agent sees who they are and their history without asking. That's the difference between "Purple panda has a question" and "your enterprise customer Dana from Acme has a question."

Offline behavior and going live

You can hide the widget when nobody's around, with one important caveat. Front lets you enable "Hide chat widget outside of online hours" so visitors don't start a chat you can't answer. But per Front's documentation, this setting "hides the widget from view" and does not turn off chat if a customer already has the widget open — so Front recommends configuring auto-responses for offline hours rather than relying on hiding alone.

On the automation side, the Automation tab is where you configure the chatbot: welcome messages, triage of incoming inquiries, collecting customer information, an email-collection banner, and AI knowledge sources. You can also add CSAT to chat with the {{survey}} variable, which prompts the visitor to leave a 5-star rating at the end of a conversation.

How a chat becomes a conversation

Once the snippet is live, the flow is immediate. A visitor opens the widget and sends a message; it appears instantly in Front as a conversation in your Front Chat inbox. From there it behaves like any other Front conversation — you can assign it, comment internally to a teammate, tag it, and run Front rules against it to auto-route or auto-tag based on content. Front even uses a distinct notification sound for chat so agents can tell a live visitor apart from an email that can wait.

If the visitor is verified or supplies an email, the conversation is stitched to their contact record and CRM history. If they're anonymous, it opens under a placeholder name and can be enriched later. Either way, chat is not a silo — it's the same object model as the rest of your inbox, which is exactly why Front Chat is worth using over a disconnected third-party bubble.

The honest limits — and where an AI layer picks up

Front Chat is a genuinely good native widget: it's on all plans, installs in one paste, and lands in the inbox your team already lives in. Credit where it's due. But it's worth being clear about the edges.

Branding and display polish are plan-gated. Customizing or removing the "Powered by Front" line and using the "Name for display" option (showing a team name instead of the individual agent's name) are Professional/Enterprise features. On lower tiers, the widget carries Front's branding and shows agent names as-is. Front's pricing tiers lay out exactly what unlocks where.

The chatbot triages; it doesn't reason. The native Automation tab handles welcome messages, keyword triage, and information collection well — but that's routing and collecting, not answering. It can ask for an email and hand off to a human; it can't read "I was double-charged on order #4821 and need it refunded," look up that order, and resolve it in the chat.

That reasoning-heavy part is the seam where an AI agent layer fits — on top of the Front Chat you already run, not instead of it. The broader category of AI agents for customer service exists precisely for the work a keyword triage can't do. Macha is one such layer: it connects to the Front you already use through the live Macha–Front connector and does not replace Front, your inboxes, or your widget. A chat lands in the Front Chat inbox as it always has; then Macha's agent reads it, understands intent rather than keywords, pulls a real order or account status through a custom tool that turns your REST Front API or backend into something the agent can call, and drafts or sends a grounded reply — all while the visitor is still on the page. Macha's credits are consumed per AI action, never per resolution: routing, reading, and answering have different costs, and it's honest to price them that way. For the mechanics, connecting Front to Macha to route conversations to AI walks through the setup.

The clean division of labour: let Front Chat be the front door — the widget, the branding, the shared-inbox home — and layer an agent on top for the part a placeholder name and a keyword can't do, which is actually reading the visitor's question and answering it well.

FAQ

Where do I set up Front Chat? Go to Settings (gear icon) → your workspace → Inboxes → Create inbox (or open an existing inbox) → Channels → Connect channel → Front Chat. During setup you pick a theme color, an optional chatbot, and whether to accept only verified users or allow anonymous visitors.

How do I install the Front Chat widget on my website? Open the channel's Installation tab, copy the widget code snippet, and paste it before the closing </body> tag on your page. It loads Front's chat.bundle.js and initializes with your chatId. For single-page apps use the front-chat-sdk package, and for mobile embed it in a webview.

What's the difference between verified and anonymous visitors? Anonymous visitors can chat without identifying themselves and get an auto-generated placeholder name (like "Purple panda"). Verified users are authenticated by your site via a verification secret and user hash, so Front matches them to your contacts and CRM (Salesforce, HubSpot, Pipedrive, Zoho) automatically.

What happens to Front Chat when my team is offline? You can enable "Hide chat widget outside of online hours," but Front notes this only hides the widget — it does not close a chat a visitor already has open. Front recommends setting up auto-responses for offline hours instead of relying on hiding alone.

Can I add AI to Front Chat without replacing Front? Yes. An AI agent layer like Macha connects to Front as a live connector and runs on top of your existing Front Chat inbox — it doesn't replace the widget or your inboxes. The chat lands in Front as usual; the agent then reads it, pulls real data through your own tools, and drafts or sends a grounded reply.

Ready to turn a chat that just landed in your inbox into one that's actually answered? Start a free trial of Macha and connect it to your Front in minutes.