In this guide, we’ll walk through the exact steps using Oscar Chat — our recommended tool because it bundles AI chatbot, live chat, popups, and forms into one $40/month package. But the embed method works the same for any chat provider.
Why Your Webflow Site Needs Live Chat
If you’re running a business site, portfolio, SaaS landing page, or e-commerce store on Webflow, live chat directly impacts your bottom line:
- 79% of consumers prefer live chat over email for quick questions (Kayako research).
- Websites with live chat see 3-5x higher conversion rates compared to those with only contact forms.
- AI chatbots can handle 60-80% of common questions automatically — even when you’re offline.
- Live chat reduces bounce rates by engaging visitors before they leave.
- Chat transcripts provide valuable customer insight you can’t get from analytics alone.
Webflow sites tend to be beautifully designed. A well-integrated chat widget enhances the experience rather than detracting from it — as long as you choose a tool with clean, customizable design.
Step 1: Choose Your Live Chat Provider
Before you can add chat to Webflow, you need to pick a provider. Here’s a quick comparison of the most popular options for Webflow sites:
| Provider | Price | AI Chatbot | Live Chat | Popups | Forms | Webflow Compatible |
|---|---|---|---|---|---|---|
| Oscar Chat | $40/mo | ✅ AI included | ✅ | ✅ | ✅ | ✅ |
| Tidio | $29/mo/seat | $39/mo add-on | ✅ | ❌ | ❌ | ✅ |
| Crisp | $25/mo | $95/mo plan | ✅ | ❌ | ❌ | ✅ |
| Intercom | $39/seat/mo | $0.99/resolution | ✅ | ❌ | ✅ | ✅ |
| Tawk.to | Free | ❌ | ✅ | ❌ | ❌ | ✅ |
We recommend Oscar Chat for Webflow sites because it gives you the complete toolkit — AI chatbot that answers visitor questions automatically, live chat for human support, plus popups and forms for lead generation — without needing multiple tools or subscriptions.
Step 2: Sign Up and Get Your Embed Code
Here’s how to get started with Oscar Chat (similar steps apply for other providers):
- Go to oscarchat.ai and create your free account.
- Complete the onboarding wizard — add your website URL, customize your chat widget colors and position.
- Navigate to Settings → Installation in your Oscar Chat dashboard.
- Copy the JavaScript embed code. It will look something like this:
<script src="https://widget.oscarchat.ai/chat.js" data-id="YOUR_SITE_ID" async></script>Keep this code snippet handy — you’ll paste it into Webflow in the next step.
Step 3: Add the Code to Your Webflow Project
Webflow provides two ways to add custom code: site-wide (appears on every page) or page-specific. For live chat, you almost always want site-wide.
Method A: Site-Wide Installation (Recommended)
- Open your Webflow project in the Designer.
- Click the gear icon ⚙️ in the left panel to open Project Settings.
- Go to the Custom Code tab.
- Scroll down to the “Footer Code” section (labeled “Before </body> tag”).
- Paste your Oscar Chat embed code there.
- Click Save Changes.
- Publish your site (the code only takes effect after publishing).
Important: Custom code in Webflow only works on published sites — not in the Designer preview. After publishing, visit your live site to confirm the chat widget appears.
Method B: Page-Specific Installation
If you only want live chat on certain pages (e.g., your pricing page or contact page):
- In the Designer, select the page from the Pages panel.
- Click the gear icon next to the page name.
- Scroll to “Before </body> tag” in the Custom Code section.
- Paste your embed code and save.
- Publish the site.
Step 4: Customize Your Chat Widget
Once installed, head back to your Oscar Chat dashboard to customize the widget’s appearance:
- Colors: Match your Webflow site’s brand palette. Oscar Chat supports custom primary colors, background colors, and text colors.
- Position: Bottom-right is standard, but you can switch to bottom-left if your design calls for it.
- Welcome message: Set a greeting that appears when visitors first see the widget. E.g., “Hi! How can we help you today?”
- Avatar and name: Use your brand logo or a team photo for a personal touch.
- Operating hours: Define when live agents are available. Outside those hours, the AI chatbot handles conversations.
Step 5: Train Your AI Chatbot
This is where Oscar Chat shines compared to basic live chat tools. Instead of just waiting for a human agent to respond, the AI chatbot can answer visitor questions instantly.
To train it:
- In your Oscar Chat dashboard, go to AI Training.
- Auto-crawl your Webflow site: Oscar Chat scans your pages and learns from your existing content.
- Upload documents: Add PDFs, help docs, or FAQ sheets for deeper knowledge.
- Add custom Q&As: For specific questions you want handled in a particular way.
- Test in the preview: Ask the chatbot sample questions to verify accuracy.
The AI improves over time as it handles more conversations and you refine its training data.
Step 6: Set Up Popups and Forms (Bonus)
Since you’re already using Oscar Chat, take advantage of the built-in popup builder and form builder — no additional Webflow integrations needed.
Popup ideas for Webflow sites:
- Exit-intent popup: Offer a discount or lead magnet when visitors move to close the tab.
- Scroll-triggered popup: Show a newsletter signup after visitors read 50% of a blog post.
- Timed popup: Display a special offer after 30 seconds on the pricing page.
Form ideas:
- Contact forms that feed directly into your Oscar Chat inbox.
- Feedback surveys post-purchase.
- Lead qualification forms with conditional fields.
All of this is configured in the Oscar Chat dashboard — no changes needed in Webflow’s Designer.
Troubleshooting Common Issues
If your chat widget doesn’t appear after publishing, check these common culprits:
- Code in header instead of footer: Some chat scripts need to load after the page body. Always use the “Before </body>” section.
- Didn’t publish: Webflow custom code only runs on the published site, not in the Designer preview.
- Ad blockers: Some browser extensions block chat widgets. Test in an incognito window.
- Webflow plan limitations: Custom code requires at least a Webflow Basic site plan (not the free Starter plan for hosted sites). However, if you’re on a CMS or Business plan, you’re covered.
- Caching: Clear your browser cache or wait a few minutes after publishing for changes to propagate.
Webflow Live Chat: Best Practices
To get the most value from live chat on your Webflow site:
- Keep the widget subtle: Don’t use aggressive animations or sounds. A clean, small bubble in the corner is ideal.
- Use proactive messages wisely: Trigger a chat message on high-intent pages (pricing, checkout) but not on every page.
- Let AI handle first contact: Most visitors ask the same 10-20 questions. Train your AI to handle those so human agents focus on complex issues.
- Match your Webflow design: Customize widget colors to match your site’s palette. Consistency builds trust.
- Monitor analytics: Track chat volume, response times, and common questions to continuously improve.
Frequently Asked Questions
Can I add live chat to a free Webflow site?
You can add custom code on free Webflow projects, but it only runs on the webflow.io subdomain. For custom domains, you need at least a Basic site plan. The chat embed code itself works regardless.
What is the best live chat for Webflow?
Oscar Chat is the best all-in-one option for Webflow sites. It includes AI chatbot, live chat, popups, and forms for $40/month — no per-seat pricing, no add-on costs.
Does Webflow have built-in live chat?
No. Webflow does not include a native live chat feature. You need a third-party tool like Oscar Chat, which integrates via a simple JavaScript snippet in your project settings.
How do I add a chatbot to Webflow?
Sign up for a chatbot provider like Oscar Chat, copy the embed code from your dashboard, paste it into Webflow’s Project Settings → Custom Code → Footer section, and publish your site.
Will a live chat widget slow down my Webflow site?
Modern chat widgets like Oscar Chat load asynchronously, meaning they don’t block your page from rendering. Impact on page speed is typically under 50ms — negligible for user experience and SEO.
Can I customize the chat widget to match my Webflow design?
Yes. Oscar Chat offers full color customization, position options, custom avatars, and welcome messages. You can match it precisely to your Webflow site’s brand identity.
Does Oscar Chat work with Webflow e-commerce?
Absolutely. Oscar Chat works on all Webflow plans including e-commerce sites. The AI chatbot can answer product questions, and popups can promote sales and capture leads.
Can I show live chat only on specific Webflow pages?
Yes. Instead of adding the code site-wide, paste it into the custom code section of individual pages in Webflow. You can also use Oscar Chat’s targeting rules to control where the widget appears.
How do I remove Webflow live chat if I change my mind?
Simply delete the embed code from your Webflow Project Settings → Custom Code section and republish your site. The widget will disappear immediately.
Is Oscar Chat GDPR compliant for European Webflow sites?
Yes. Oscar Chat is designed with GDPR compliance in mind, including data processing controls and the ability to configure cookie consent before the chat widget loads.
