Chatfuel

Set up the chat widget for a client

The chat widget is the odd one out in the channel lineup: it doesn't belong to Meta or TikTok, it lives on the client's own website.

Last updated on

The chat widget is the odd one out in the channel lineup: it doesn't belong to Meta or TikTok, it lives on the client's own website. Visitors who land there from ads — or from anywhere — open the chat and start talking, and the same AI that answers the client's WhatsApp answers them. For you it's the cheapest channel to add: no portfolio access, no phone numbers, no verification. The only outside dependency is whoever edits the client's site.

Installing the widget code is one of the few steps the AI Co-Worker can't complete for you — the snippet has to be pasted into the client's site HTML, which lives outside Chatfuel, and the appearance settings are also set by hand. Everything else about the widget, including turning its AI on, you can do in the dashboard or by asking the Co-Worker.

Setting it up

Everything except the snippet install happens in Chatfuel, in the client's company:

  1. Open the Website settings. Go to Settings → Website.
  2. Brand it for the client. Set the appearance: company name, accent color, and logo — the client's brand, not your agency's. This is what visitors see in the chat header.
  3. Add the client's domains. List the domains the widget will run on.
  4. Copy the installation code. Copy the code snippet from the settings screen.
  5. Send the snippet to the client's developer. The snippet goes into the site's HTML — before the </body> tag or inside <head>. If the client has a web developer, hand it over with those two lines of instruction; it's a five-minute job. Don't edit a client's site yourself unless that's explicitly part of your engagement.
  6. Turn on the widget's automation. Go to Fuely AIAutomations and enable the Website chat widget automation — like every channel, the widget's AI stays off until its automation is on. The automation's Additional instructions are where you shape what the AI says to site visitors.

Or hand the last step to the AI Co-Worker: tell it "Turn on the chat widget on my website and make the AI answer there" and it enables the widget's automation and confirms what it set. The snippet still travels to the client's developer by hand.

What to tell the client up front

Two limitations surprise clients if they find out after launch. Say them before:

  • The closed widget button shows the Chatfuel icon. The client's logo appears inside the open chat, but the small button in the corner of the site always uses the default Chatfuel icon — on every plan, no exceptions. If the client asks for a fully white-labeled button, the honest answer is: not currently possible.
  • The widget doesn't greet visitors. There's no proactive welcome message yet — the AI replies only after the visitor sends their first message. A greeting feature is on the roadmap. Until then, compensate where you can: a warm tone written into the widget automation's Additional instructions, a Knowledge Base that nails the first answer, and branded appearance so the empty chat still looks like the client's.

Framed early, these are footnotes. Discovered late, they're a complaint ticket.

On this page