How to Add Live Chat to Your Webflow Website for Free: Easy Step by Step Guide

Looking to increase engagement and get more inquiries from your website visitors? Follow these easy steps to add a live chat function on your Webflow site. 


The first thing you’ll need is a Facebook page for your business. If you don’t already have one, go here to create a Facebook page.


Go to your page’s Settings in the bottom left corner.




Then go to Messaging.





Once you’re in Messaging, scroll down to “Add Messenger to your website” and click the Get Started button.



Click the Set Up button.



Follow the 4 steps prompted next: Set Language, Add Domains (add both “https://” and “https://www.” versions) Copy the code, and click next.


Next we’re going to place the code in the backend of your Webflow website. Don’t worry about the chat content yet, we’ll edit that in a minute.


Go to Webflow and go to your website’s Project Settings > Custom Code > Scroll down to Footer Code.


Paste the code in the Footer Code box and click Save Changes.




Now let’s edit what shows up on your live chat function.


Go back to Facebook and head to Start the Conversation.



From here you’ll want to edit the Welcome message that people see when clicking on the chat, as well as the 3 FAQs that visitors will be prompted with, along with their auto-replies.


Then scroll down to Customize Your Chat Plugin. 


From here you can customize your greeting and tweak the way the chat plugin looks.


Once you’re done making changes, click the Publish button in the bottom right corner.



Head back to Webflow, re-publish your website, and your chat should show up!



Need help managing your Webflow website? Get in touch today!


Written by

Jimmy Mallinson

Jimmy is the owner of Redhead Marketing Group Inc.

Let's work together!

Fill out the form below for a free quote on web design and marketing services (or just to say hi).

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.