Live chat for website visitors, on a platform you own
A snippet on your site, and behind it a live chat platform of your own: the inbox, the AI chatbot that answers first and the contacts, in a React app you deploy.
What the website chatbot does before anyone on your team looks
Web chatbots used to be decision trees; this one reads the conversation. You write who it is and what it may promise, and it answers from the record you keep and calls for a person when you said it should. AI chatbots for website visitors run on the same settings as the other four channels.
Answers from what it knows
The knowledge base is read on every message: the business profile, the opening hours, the FAQ in the order you put it in, the catalogue, and your notes on how you work.
Hands over to a person
A rule in your words — the visitor asks for a human, a manager or a call — the hand-off message it writes, and the teammates it assigns. Up to twenty rules on the website source, none by default.
Answers when you decide
Around the clock, or only when nobody on the team is at work; during working hours the conversation waits for a person. The hours are set once, in the knowledge base.
Follows up once
A nudge when the visitor goes quiet, written the way you told it to write one.
Asks, and stores the answer
What the AI asks for and where it stores the answer — an order number, a plan, a reason — into the contact’s own attributes. Up to forty captures on a source.
Types like a person
Short pauses between messages so replies read like a person typing, set per source and inherited by every source you do not touch.
The platform behind the widget is yours
The widget is one snippet on your site. The rest of a live chat platform — the inbox your team answers from, the AI that answers first, the record every visitor becomes, the flows — is a React + Vite project the wizard writes, deployed on your domain under your name and logo, MIT. The proxy that holds the Chatfuel token is copied in as source, and the token never reaches a browser.
A live chat widget on the domains you allow
Its name, its accent colour, its logo and the domains it may appear on are settings in your app. Paste the installation snippet before the closing body tag of any page that should carry the chat, and the widget shows up on those domains and nowhere else.
The inbox takes the hand-off
Support chat for website visitors lands in the same inbox as everything else. A conversation the agent is running shows as Automated; when it hands over, the thread says so — “The AI handed this chat to an operator” — and the contact is marked as having asked for a human until somebody opens it. Take over, and the bot stops answering; you do.
Five channels, one list
Website live chat sits in the same list as WhatsApp, Instagram, Facebook and TikTok, live over one WebSocket, and the agent answers on all five. A visitor becomes a contact on the first message, and the conversation is the contact’s record: the hand-off, the note, the attributes the agent captured and the sales stage all sit on it.
From the command to the first website conversation
Four moves. The third is where the time goes, and the fourth decides how long the inbox’s socket stays open.
- 01
Run the command, pick the four modules
npx @chatfuel/wizard --modules automations,livechat,knowledge-base,contacts. Anything a pick depends on comes along and is named on screen, and the modules you did not pick are removed from the app before it is written. The module skills land in .claude/skills or .agents/skills, so the coding agent that continues the work is not starting cold.
- 02
Switch the widget on, paste the code
In your app: the company name, the accent colour, the logo, and the domains the widget may appear on. Put the installation snippet before the closing body tag, or in the head, of every page that should carry the chat. The widget scope exists on every bot; connected means enabled.
- 03
Write what the AI website chatbot knows, and when it hands over
The business profile and the opening hours, the FAQ in the order the agent reads it, the products with prices and photos, and your notes on how you work. Then, on the website source: what a visitor has to ask for before the agent hands over, what it says as it does, and which teammates get the conversation.
- 04
Deploy the platform
Vercel with one command, a Node server of your own, or Docker: the same proxy source on all three. On Vercel the inbox’s WebSocket closes when the function hits its duration limit — 300 s on Hobby — and the client reconnects; on your own server and in Docker it is unbounded, and the app can sit under a sub-path.
What the widget carries
What a visitor can send, what the agent and your team can send back, and what the thread shows about it, read off the message types and the send mutations the platform exposes for the widget.
| Name | What it means |
|---|---|
| From the visitor | |
| Text | A message typed into the chat on your site. |
| An image | The one attachment kind the widget carries. No video, no audio and no documents, in either direction. |
| A button tap | Continue the flow, open a link, or call a number: three button kinds, and the thread records which one was tapped. |
| From the agent or your team | |
| Text, and text with buttons | A message in the site chat with buttons under it — the flow element, and what the inbox renders as a transcript of what the visitor was offered. |
| Seen, Unseen, Sending | The three states an outgoing message shows. Reception, not delivery: Unseen is sent, Seen is read, and there is no Failed. |
| A hand-off to a person | A rule on the AI, or the human-agent element in a flow. Either way the conversation moves to your inbox and is marked as waiting until somebody opens it. |
| On the contact | |
| A contact, on the first message | There is no create for the widget, and no phone or username on the record. What the agent captures goes into attributes of your naming. |
| One entry point | A visitor writes in the website chat. That is the widget’s only source, where Instagram has six. |
Where the platform behind the chat widget for websites runs
Vercel, a Node server of your own, or Docker; the same proxy source on all three. The rows are the deploy page’s own, and the WebSocket row is the one a live inbox cares about.
| Name | Vercel | Your own server | Docker |
|---|---|---|---|
| Command | npm run deploy | npm run build && npm start | docker build, then docker run |
| Needs an account | A Vercel account | None | None |
| Sub-path, as in /app/ | Root only | Yes | Yes |
| WebSocket lifetime | Capped by the function duration — 300 s on Hobby; the client reconnects | Unbounded | Unbounded |
What website chat software costs here
Two meters, and a workspace plan they draw from. The inbox, the contacts and the flows are part of the plan, whichever plan; the SDK and the app are free. No seat and no per-app fee: chat software for website support is billed by what the AI reads and writes, and by the plan the workspace is on.
| Name | What it is | Price |
|---|---|---|
| The meters | What comes out of the balance. | |
| AI input | Everything the agent reads on a message: the knowledge base record and the conversation so far. | $2.75 per 1M tokens |
| AI cached input | Input the model has already read once. | $0.275 per 1M tokens |
| AI output | What it writes back. | $16.50 per 1M tokens |
| Conversion event reported to Meta | Only when an event set in the ads module fires, on WhatsApp. Nothing on the website sends one. | $0.01 per event |
| Part of the plan | ||
| Inbox, contacts, flows, publishing | Every module and every channel, on any plan. | Free |
| The SDK and the app it generates | MIT, copied into your project as source. | Free |
| The workspace | Where the bot lives and where the balance comes from. | |
| Business | One business, one bot, your own app. $20 of credits a month for the meters to draw from. | $20 a month |
| Agency S | Client bots, all on one balance. $100 of credits a month, shared by every bot in it. | $100 a month |
FAQs
The SDK and the app it writes are free: npx @chatfuel/wizard is a public npm package under MIT, and there is no seat, no per-app fee and no licence key. The Chatfuel workspace the app runs on is not free. The inbox, the contacts and the flows are part of the plan, whichever plan, and the plan starts at $20 a month. Free website chat, then, is the code; the platform underneath it is what you pay for, and the wizard offers the trial on the way.
PricingOne command, and the chat platform behind your site is yours
The widget on your pages; the agent, the inbox and the contacts in a codebase you can open, under your name.
npx @chatfuel/wizard