Guide

Webflow AI Chat Widget

A Webflow site is usually the most polished thing a brand owns - and often the most one-directional. Visitors admire it, scroll it, and leave without ever asking the question that would have converted them. A Webflow AI chat widget adds the missing two-way channel without compromising the design.

EasyChatWidget slots into Webflow through the native custom-code panel, so there is no export step and no plugin marketplace to depend on. It studies your Webflow copy and replies in your brand voice, and you control its colours and placement to match the design system you already built.

Why add EasyChatWidget to Webflow

Gives a static Webflow marketing site a live channel that actually converts
Adds through Webflow's own custom-code panel - no export, no third-party app
Learns your published copy, so answers sound like the rest of the site
Passes the conversation to a human by email or WhatsApp when it matters

Best for: Webflow use cases

Design & branding agencies

Give a beautifully built client site a support layer that respects the design.

SaaS marketing sites

Answer feature, plan, and integration questions before the demo request.

Startup landing pages

Qualify and capture early leads around the clock while the team ships.

Studios & portfolios

Field project scope, availability, and pricing enquiries automatically.

How to install the chat widget on Webflow

1
Open site settings
In Webflow open Site settings → Custom code tab.
2
Find the “Footer code” field
Scroll to the “Footer code” field - code added here is injected before the closing </body> tag on every page.
3
Paste the snippet
Drop in the embed snippet below.
4
Save & publish
Save changes, then Publish your site - custom code only goes live after publishing. Note: site-wide custom code requires a paid Site plan.

Your embed snippet

Copy this and follow the steps above.

<script
  async
  src="https://easychatwidget.com/widget.js"
  data-widget-id="YOUR_WIDGET_ID"
></script>

Note

Replace YOUR_WIDGET_ID with the ID from your dashboard. Don’t have one yet? Create a free account to get it.

See the Webflow chat widget in action

Webflow homepage - add the EasyChatWidget AI chat widget to Webflow — Webflow, where the EasyChatWidget AI chat widget goes live in minutes.

EasyChatWidget vs. a default chat embed

How the EasyChatWidget AI chat widget compares with a default chat embed on Webflow.

Feature comparison of EasyChatWidget versus a default chat embed on Webflow
Feature	EasyChatWidget	a default chat embed
Understands and answers questions with AI
Trains itself on your website automatically
Answers from your own content (no invented facts)
Replies in any visitor language		Manual only
Captures leads (name, email, question)		Varies
Installs with a single snippet
Full colour, position & branding control		Limited
Instant human handoff by email & WhatsApp

Webflow chat widget FAQ

How do I add a chat widget to Webflow?

Open Site settings → Custom code, paste the EasyChatWidget snippet into the Footer code field, then save and publish. It appears on every page once the site is published.

Do I need a paid Webflow plan?

Site-wide custom code requires a paid Site plan. With that in place, adding the widget is a one-time paste and nothing else is needed.

I pasted the code but nothing shows - what went wrong?

Custom code only activates after you Publish in Webflow. Publish the project and hard-refresh the page and the bubble will appear.

Can I make it match my Webflow brand?

Yes. Colours, position, and the greeting are all set in your EasyChatWidget dashboard so the widget blends into your Webflow design rather than fighting it.