How to Add Facebook Chat to a Webflow Site

It’s 2021 and Facebook Chat is quickly becoming one of the preferred communication tools for customers who need to reach out to a business. Omnichannel communication is a must for brands that want to stay in the game, but the good news is that it’s an easy enough upgrade if you know what you’re getting into. 

In this guide, we’ll look at Facebook and Webflow’s guidelines for integrating the Facebook Chat feature when this is where your website is hosted. You’ll get an in-depth look at the installation process and all the details you need. And if you want to save the interruptions of another messaging tool, well even discuss how our live chat agents can handle all your communications so you don’t even have to think about it. 

Consumers want personalized, connected communication, and with more than 4 billion people using social media, you can guarantee that more than half of them will prefer to reach out via a social network than through other means. In 2019, it was only about 35% of people who preferred social media contact. Now, it’s closer to 65%-- which means it’s time to get on board if you haven’t already. 

Now that Messenger is available as a separate app, customers love when brands integrate the feature on their website. They feel like they get more personal attention and a dedicated resolution than using other means. 

The Facebook Chat plugin

The highlights:

• Webflow makes it easy to integrate the Facebook Chat plugin on your website
• The plugin offers seamless communication between websites and the Messenger app so that you don’t lose anything in translation
• A Guest Mode is available so that every customer can use the Facebook Chat plugin, even if they aren’t signed up with Facebook or Messenger
• FAQs, auto-replies, and availability scheduling are included, among other features
  

This open-source plugin is designed to work on almost every website, but Webflow specifically has a user-friendly integration that only takes a few extra steps once you set up your Facebook Pages account properly. There’s also a community of developers on Facebook that have resources and support for those who need it. 

All you need is to be logged into your Facebook Page (which should be published). Then, you’ll be able to go into the settings and make the necessary changes so that Messenger shows up as a bubble on your website in the lower right corner, like this:

You can use the chat feature and have customers contact you from all desktop browsers and mobile devices, with two exceptions. Facebook’s Chat plugin will not work on Internet Explorer, or on browsers that are launched from within the Messenger app. It can, however, sync your conversations across platforms and devices so you’ve always got a line open, no matter where you are. 

Installing the Facebook Chat feature on your Webflow site

For Webflow users, the process of activating the chat feature is fairly simple. Along with the steps below for the Facebook Pages settings modifications, you’ll simply need to follow these steps to get your Facebook Chat working:

1. Go to your Project Settings 
2. Click on the Custom Code section 
3. Paste the snippet of JavaScript code into the Footer section
4. Click “Save Changes” 

And now, customers from around the world can contact you via Messenger, right on your website, and right away so that they don’t have to wait for a response. 

Setting up the plugin from Facebook Pages settings

In addition to adding the code to your website, you’ll also need to setup and activate the messaging feature from your Facebook Page. Simply login to your page and go to the Settings section, and then find the Messaging section. From here, follow these steps:

1. Click “Add Messenger to Your Website and then click “Get Started”
2. Go to “Set Up Your Chat Plugin” and begin the setup process
3. Select your preferred language and add your website URL
4. Copy the JavaScript code that you’ll paste into your Webflow settings

This will give you the basic setup integration. If you want to customize things, you can take a few other steps while you’re here. Under the “Start the Conversation” section, you’ll find the area where you can set up your welcome message, FAQs, or even add automated responses. 

Facebook makes it easy for you to modify your settings and get the Chat integration going. And for those who want them, now we’ll take a look at the developer options. 

Developer options for full customization

If you visit the Facebook for Developers page, you’ll find a full page of in-depth information and integrations, custom attributes, and two big pieces of the puzzle that you might need: safelisting and the HTML div code. Safelisting simply refers to allowing your domain to be accessed by Facebook for use of the chat plugin, and is something that can be done through the Facebook settings page as shown here:

You can also do this programmatically, but that’s best left to advanced users. The other thing that developers have access to is a full list of custom attributes, as well as an in-depth way to integrate all kinds of tools and solutions. 

If you’re searching for the code that you’ll need to input and you don’t want to use the pre-built integrations, you can pull the code from this page, which looks like:

<div class=”fb-customerchat”

Page_id=”<PAGE_ID>”>

</div>

Since most of our audience isn’t focused on the custom, complex developer features, we’re just going to leave it at these basic aspects and those who want the details can find them at the Facebook for Developers page. 

Messenger supports templates, rich media, and more

When you use the Facebook Chat plugin that’s powered by Messenger, you’ll get access to all of the rich media features of the Messenger platform, including the ability to send and use:

• Text and video messages
• Audio files
• GIFs and image files
• Call and postback buttons 
• URL button
• Email, phone, and text quick reply features
• Message syncing across platforms 
• Guest mode access 
  

Plus, Facebook offers its own Insights section for Messenger, where you can see the stats and analytics of all of your chats so that you can track your customer service through social media to ensure that it’s being used effectively and that your audience is getting what they need. 

Get to know guest mode 

Guest Mode was released in late 2020 as a way to expand the benefit of Facebook Chat to more brands and businesses. After all, despite there being 4 billion people on social media, there are billions more that don’t use Facebook and have never created a messenger account. Through the new mode, users can access Facebook Chat plugins on any business website that uses them without having to create an account. 

This benefit has caused several brands to reconsider their options for live chat and integrate with Facebook Chat instead, because it also goes further to give even more benefits. Guests will only have 24-hour access to their transcripts, but your business can keep the conversation as long as necessary. There's even a new version out there that allows people to transition from Guest Mode to the Messenger login to continue their conversation in the app. 

Logins will be requested for guests when they:

• Click the “Continue in Messenger” button
• Attempt to send an attachment (only available to registered accounts at the moment)
• Attempt to contact a business that’s “away”
  

If a business is away, after all, it will be important for them to have a way to reach the customer when they get to the message. In guest mode, the chat will simply disappear from the user’s end and there will be no way for the business to track them down. Essentially, Guest Mode ensures that every single customer can reach your business quickly and efficiently, and that those who do have accounts don’t need to login or provide information until it’s necessary. 

What can Messenger integrations do for you?

There is a lot to love about Facebook offering the Chat integration so that brands can use Messenger as their communication tool of choice. Today's audience demands a more convenient, accessible tool to reach businesses and about half of the people using online support tools prefer live chat to any other type of communication. 

So, from the beginning, you’re already stepping up to the plate and giving your customers what they demand. Then, you add in the other perks and the list just grows. Your business really can’t continue to thrive without this integration, but if you’re still curious as to why, here are a few things to keep in mind. 

• Familiarity: When you use Facebook Chat, you’re giving people a familiar tool that is easy to use. Even those who have never used Messenger can catch on fairly quickly, and those who use it regularly will enjoy the comforts of having a tool that they have seen before. It works the same on your website as it does on Facebook and in the Messenger mobile app. 

• Time Savings: When people can contact you directly on your website, it saves a lot of time. They don’t have to track down how to get in touch or try to find your Facebook page because the chat bubble is right there, waiting for them to inquire so that you can answer the call. 

• Rich Media: Messenger and Facebook Chat integrations work seamlessly, including allowing users to access the rich media features like audio and video sharing, file sharing, and more. It’s even got the ability to share GIFs. 

• Less Effort: Let’s take a second to appreciate the reduced amount of work that comes from having this chat integration right on your website. It's less work for your audience, but it’s also less effort for your team because everything is integrated and streamlined. 

• Personalization: Messenger and live chat services allow you to provide a much more tailored experience for your audience, which is what they crave. You can do this right on your own website, saving them the step and making them feel that much more connected. Then, you can even give them the chance to carry on through Facebook or Messenger later on, provided that they have an account of course. 

And, if nothing else, let’s discuss the face that the Facebook Chat integration for your Webflow site is totally free to use. Forget paying for high-end live chat software and SaaS solutions, because Facebook is ready to deliver as your primary chat tool. 

We know what you’re thinking—won't having this great tool mean more work for your team when it comes to fielding messages? Well, probably, but that doesn’t mean you’re on your own. You could reconsider your customer service strategy, or you could reconsider who’s doing the work. 

Partner with Smith.ai to handle your Facebook message answering and more

Most companies today have far too much on their plate to worry about one more thing. And yet, you can’t just skip over the customer needs and demands, including things like quick, 24/7 responses.

You’ll get a lot more benefits from our comprehensive live chat solution that handles standard live chats and even SMS texts. The software and the staff are included in every live chat plan, and we’ll guarantee that your brand has real-time answering in English and Spanish by trained agents who know how to act as the face of your business. We’ll even connect with your website or e-commerce tool. 

Our dedicated team of live virtual receptionists will handle all kinds of needs, including basic questions, scheduling appointments, screening leads, and even payments and new client intake. Ask how you can rely on us to change your brand’s image for good. We can even help you create that ideal strategy to handle it all without breaking the budget, and while still meeting your business needs. 

You’ll get all the details when you schedule a consultation to learn about our 24/7 live chat and Facebook message answering services that can take your business to the next level. You can also reach us at hello@smith.ai or (650) 727-6484.