How to Add Live Chat to a Webflow Site
A step-by-step guide on how to add live chat to a Webflow site. Install a fast chat widget and AI chatbot in minutes to capture leads and answer visitors instantly.
Webflow lets designers ship pixel-perfect sites without writing code — but a beautiful page still can’t answer a visitor’s question on its own. When a prospect lands on your pricing or contact page and wonders about something, they want an answer immediately, not a form they’ll forget to check. A live chat widget gives them that instant channel. This guide shows you exactly how to add live chat to your Webflow site in just a few minutes.
How to add live chat to a Webflow site
You have two clean options:
- The site-wide custom code method — paste a one-line snippet once and the widget appears on every page.
- The page-level embed method — add the snippet to a single page if you only want it there.
The site-wide method is cleanest, so we’ll start there.
Method 1: Add the snippet via site-wide custom code (recommended)
- Create your EasyChatDesk account and copy your license key from the dashboard.
- In the Webflow Designer, open Site Settings → Custom Code.
- Paste this snippet into the Footer Code box (before
</body>):
<script>window.__ecd={license:'YOUR_LICENSE_KEY'};</script>
<script src="https://cdn.easychatdesk.com/widget.min.js" async></script>
- Click Save Changes, then Publish your site for the code to take effect.
The async attribute loads the widget in the background, so your Webflow site stays fast. Because footer code applies site-wide, the launcher now appears on every published page.
Method 2: Use a page-level Embed element
Want chat on just one page? Use an Embed element:
- In the Designer, drag an Embed element onto the page (find it under Components / Add Elements).
- Paste the same snippet into the embed’s code box.
- Save the embed, then Publish the site.
Page-level embeds only load where you place them, so use the site-wide footer code if you want chat everywhere.
Step 3: Verify and customise
Open your published site in an incognito window. The chat launcher should appear in the corner. Send a test message and confirm it reaches your dashboard. Then spend a few minutes on the essentials:
- Match your brand colour and choose the launcher position.
- Write a welcome message that fits your brand voice — e.g. “Hey! Questions about working with us?”
- Set a proactive greeting on high-intent pages like pricing or contact.
- Enable the AI chatbot so questions get answered even when you’re away.
See everything you can configure on the live chat widget features page.
Why live chat matters for Webflow sites
Webflow is a favourite for agencies, SaaS marketing sites, portfolios and small businesses. Across all of them, a visitor with a quick question converts much better when they can ask it on the spot.
- Lead capture — chat that runs after hours can collect a name and email through a custom form so a prospect never slips away.
- Faster answers — service and SaaS sites field the same questions repeatedly; chat answers them in seconds.
- Lower bounce — a proactive greeting can re-engage someone about to leave a key page.
Make it work around the clock
You can’t be online every hour, but your visitors browse at all times. That’s where the AI chatbot comes in. Train it on your FAQ, product pages and policies, and it handles routine questions overnight, opening a ticket for anything that needs your personal reply. No after-hours visitor leaves without an answer.
Best practices for Webflow live chat
- Publish after adding code. Custom code only goes live on a published site, so don’t skip that step.
- Focus on intent pages. Pricing, demo and contact pages convert hardest.
- Keep first replies fast. Even an instant chatbot acknowledgement beats silence.
- Use tickets for follow-ups. Detailed requests shouldn’t get buried in a chat thread.
- Check mobile. Confirm the widget behaves well across Webflow’s responsive breakpoints.
Pricing and getting started
You can start with free live chat software for your website to test the concept, then upgrade when you need unlimited history, custom forms, ticketing and advanced AI. EasyChatDesk plans begin at $17/agent/month with a 15-day free trial, so you can measure the impact on your own Webflow site first. Ready to try it? Start your free trial.
The takeaway
Adding live chat to Webflow is quick: paste the one-line EasyChatDesk snippet into your site-wide footer code, publish, and you’re live. Point it at your highest-intent pages, switch on the AI chatbot for round-the-clock coverage, and turn polished page views into real conversations.
Level up your customer support
Try EasyChatDesk free: live chat, help desk ticketing and an AI chatbot in one platform.
Start for freeRelated articles
9 Best Chat Widgets for Websites in 2026
A hands-on roundup of the best chat widgets for websites — from free live chat to AI chatbots and full help desks. Compare features, pricing and which one fits your team.
Read more
Free Live Chat for Blogger: How to Add It
Learn how to add free live chat to a Blogger blog. Paste one snippet to install a fast chat widget and AI chatbot in minutes so readers can reach you instantly.
Read more
How Does Live Chat Work for Customer Service?
How does live chat work? Learn the flow from chat widget to agent inbox, how AI chatbots and ticketing fit in, and how to set it up on your site.
Read more