Chatfuel

Set up chat widget for website

With the website chat widget, your customers can quickly ask questions right on your site without needing to search for contact information.

Last updated on

With the website chat widget, your customers can quickly ask questions right on your site without needing to search for contact information. They simply open the chat and start talking.

Setting it up involves a few key steps:

  1. Configuring the basic widget settings
  2. Adding the widget code to your website
  3. Turning on AI for the widget

Installing the widget code is one of the few steps the AI Co-Worker can't complete for you — pasting the snippet into your site's HTML happens outside Chatfuel. The Co-Worker can take you straight to the right page: just ask.

Configuring your widget

First, you'll need to add basic settings.

  1. Go to Settings > select Website.
  2. Configure the appearance (company name, accent color, and logo).
  3. Add your website domains.
  4. Copy the installation code.

Adding widget to your site

Next, add the code snippet from Settings to your site's HTML to make the chat widget appear on your website.

Place the code snippet:

  • Before the </body> tag
  • Inside the <head> tag

If you're not comfortable editing your website's HTML, it's best to ask your web developer for assistance.

Set it up in Automations

The AI in the widget is controlled by the Website widget automation. Turn it on and your AI assistant talks to customers for you based on the knowledge you provide about your business.

  1. Go to Fuely AI → Automations.
  2. Under Website, open the Website widget automation and turn it on. Like every base automation, it starts off.
  3. Add information about your business to the Knowledge Base — this works the same way as setting up AI for Instagram, Facebook, or WhatsApp.
  4. Adjust the automation's settings if you want widget-specific behavior — for example follow-ups, autobooking, or Additional instructions for how the AI talks there.
  5. Test it in the Test chat to see how the AI responds.

When a customer needs human help, an agent can take over the conversation at any time.

Or ask the AI Co-Worker

Tell it what you want in chat:

"Turn on the chat widget on my website and make the AI answer there."

It enables the Website widget automation, sets up what the AI answers there, and confirms what it set.

Turning chat widget on

Once everything is ready, turn on your chat widget.

  1. Open Settings > Website.
  2. Toggle the widget on or off.

On this page

Configuring your widgetAdding widget to your siteSet it up in AutomationsOr ask the AI Co-WorkerTurning chat widget on