How to Add Facebook Chat to a Weebly Site

Facebook is just one of the many new ways that people are looking to reach the brands they do business with, and it’s changing the way that companies set up their communications tools. Today, the Facebook Chat plugin is available for use directly on your website and it even has several integrations for different hosting services, including Weebly. 

With more than 4 billion people using social media, it’s no wonder that more people need a better way to communicate. Today’s user only has a 2.5 second attention span, too, further pitting the odds against you getting people to reach out if they can’t do it instantly. 

That’s where social media comes in—in fact, as many as 65% of your audience would rather contact you via social media. When you add that to the fact that 46% of users prefer live chat as a means of communicating with a brand, you really can’t go wrong with integrating Facebook on your website as a messaging tool. 

Customers like social media because it makes them feel like they’re getting a more personal connection. Several users also report feeling like they’re getting a more dedicated resolution. So, offering this feature on your website is appealing for several reasons. We’ll discuss the benefits later, but first, let’s look at how the chat app works. 

The Facebook Chat plugin

The highlights:

• There is a dedicated Live Chat plugin and integration for Weebly-hosted websites
• The plugin makes it easy to transition between your website, Facebook, and the Messenger app platform and never lose a conversation
• Guest Mode is available so that all visitors can connect, even if they don’t use Facebook or have a Messenger account 
• Auto reply features, along with FAQs and scheduling for availability, are offered
• Page administrators must enable the Messenger plugin

The plugin designed to integrate Facebook Chat on your website is an open-source tool that comes with plenty of instruction, right from Facebook and Weebly themselves. The Facebook Developer Community also offers a lot of resources and insight. 

As long as you’ve got a published Facebook page, you’re ready to get started. Then, just follow the instructions in this guide and you’ll be ready to communicate with your customers in their preferred format, right on your website, with a few clicks and just a single line of code. 

Here’s what it looks like during setup:

This chat feature can be accessed from all desktop browsers except Internet Explorer. It also works on mobile, except that it won’t render on in-app browsers found in Messenger. It can automatically load recent chat history and keep you connected at all times. And all you have to do is follow a few simple steps. Let's get started. 

Installing your Facebook Chat plugin 

Once you’re logged into your Facebook page, the first thing that you’ll want to do is go to your Page settings. Then, find your Messaging settings, and:

1. Click “Add Messenger to Your Website” and then click “Get Started”
2. Find the Set Up Your Chat Plugin tab
3. Click “Set Up”
4. Select your default language
5. Add your website domain
6. Copy the JavaScript code that you will need for your website. 

As a bonus, you can also go to “Start the Conversation” and add your own auto responses, create welcome messages, and even set up your FAQ section. Then, visit the “Customize Your Chat Plugin” page and check out the customizations here. 

NOTE: Although the option to change the placement of the chat icon is available, Facebook and Smith.ai do not recommend moving the icon. Users expect to find it in the lower right corner of their screen. If it’s not there, they might assume you don’t have it. 

Now that you’re done with the Facebook part of things, you can move onto adding the code through Weebly. Fortunately, their setup tool has an entire section dedicated to Messenger. Here’s how it works:

1. Go to the Website > Messenger section on your dashboard. Click “Set up now”. 
2. Connect your Facebook page and grant all necessary permissions. 
3. Once you make the approvals, you will see the connected page, and then you can click “next”. 
4. You can choose a style for your icon, as well as its position and size (remember, don’t mess with the position here). 
5. Once you’re done, you can click “Next” and it will take you to this screen:

6. Then, click “Publish” and you’re done. Now the Messenger plugin will appear on every page that you selected during the setup process.

The best part is that you can go back to your Messenger settings in the dashboard at any time to make necessary changes or disable the plugin.

Developer options 

The other alternative here is to take the developer route. This isn’t the way that the average business will go, of course, because standard installation and setup is so simple. However, if you do want to set custom attributes or create other customizations, this could be the way to go.  Developer tools will allow you to do things like safelist your domain and manually grab and tweak the code for your website. 

You can find an in-depth look at the developer options on Facebook’s dedicated developer page, but here’s an overview of the two biggest features. 

Safelisting your domain 

Your first step will be to safelist your domain so that it can use the extensions and the web view format. This can be done programmatically, or you can modify your page settings through the Advanced Messaging options. There will be an option for Safelisted Domains where you can edit to include your site:

Snag the code 

The other thing you can do with the developer tools is to snag the HTML code directly and integrate it manually or tweak it before you drop it in line. You'll have to put the code on each page that you want to have the chat tool show up on, but that doesn’t take a lot of time. The code that you will need looks like this:

<div class=”fb-customerchat”

Page_id=”<PAGE_ID>”>

</div>

There are several other customizations, attributes, and features available through the Developers community, but that doesn’t usually apply to most of our audience, so we just wanted to cover the basics. Make sure that you only use these features if you know what you’re doing, and you know that they can’t be tweaked through the pre-built setup tool. 

Facebook Chat features, support, and templates 

In addition to acting just like the Messenger platform, Facebook Chat offers several of the same features and support tools. In fact, as long as you’re not in Guest Mode, you will be able to enjoy access to rich media features like:

• Text and video messages
• Audio messages
• File sharing
• GIFs and images
• URL button
• Call button
• Postbank button
• Text, phone, and email quick reply
  

You’ll also be able to streamline and sync your messages across all the devices and platforms that you use. You can link your Messenger app to track communications on the go or even just save conversations in your inbox on Facebook for future reference. 

The final piece, and one that’s critical to most brands, is the analytics. Facebook itself offers an Insights feature in the settings where you can actually look at and try to interpret the statistics behind your Facebook Chat plugin and how well it is working. You’ll be able to track the success of your integration, see which areas need tweaked, and more. 

Get to know Guest Mode

Although it’s new, Guest Mode is quickly gaining popularity among Facebook users. When the Chat plugin started taking off, businesses started noticing a problem—people who needed to contact them couldn’t do so through the integration unless they had an account on Facebook or the Messenger platform. By late 2020, Facebook had reconciled the problem by introducing Guest Mode. 

This allows users to have temporary access to a Messenger account so that they can send and receive basic messages on your business website. The chats are active for 24 hours and can be viewed by the user for that period, but your business can keep a record of the conversation for as long as you’d like. Users can also manually end the chat, which would terminate the transcript on their end, but you would still retain the conversation. 

One new feature of the Chat plugin is the ability for users to transition and log into an account without losing anything along the way. That can happen when the user chooses the drop-down option to “Continue in Messenger”, or if other circumstances occur:

• Attachments are sent 
• Businesses are away

Currently, attachments are only available to users with accounts. And those who don’t have accounts will have a hard time keeping in touch with a business that’s not available because the company will have no way to get back to them, so the Chat plugin asks people to login if they wish to contact a company that’s away. 

Essentially, this is the guarantee that every customer will be able to reach your business quickly, efficiently, and in a way that works for them. Plus, your customers will love that they can start in Guest Mode and not give out a bunch of details until or unless it’s required. 

Why not just leave it on Facebook?

The biggest argument that people have here is that customers can contact them on their Facebook page, as well as through the Messenger app platform directly. Thus, they feel like they shouldn’t need yet another way for people to get in touch. But, when you consider that more than half of your audience enjoys social media communication and as many as 46% want live chat as opposed to other types of communication, it’s easy to see why you need this integration. 

Using Facebook Chat on your Weebly site allows you to give people a familiar experience with a tool that several people have used before. It also includes the options for rich media, such as GIFs, audio and video files, and more. That's better than most stock live chat apps, and most importantly, the Messenger platform, even used as a website integration, is totally free. 

When you bring the Facebook messaging tool to your website, you’re showing your audience how you are bringing the support to them. This will earn you some good points with the customer base because today’s consumer loves it when a brand makes service work for them. 

• Save time
• Save effort
• Create more personal connections
• Provide a familiar interface
• Integrate a free chat tool 
• And more!
  

Plus, if you’re worried about all the extra work this could create, we’ve got you covered. Whether you need a hand here or there or you want someone to take the entire weight off your plate, our team is ready and waiting. 

Get more done when you streamline with Smith.ai 

You have enough to handle without another tool to manage, but you can’t do without that 24/7 service that your customers demand today. Fortunately, Smith.ai is the solution. Partner with us and our dedicated live chat agents will answer live website chat, and more. 

When you choose our team, you get a comprehensive live chat solution that handles everything from live chat to SMS message answering. We can deliver the software and the service-oriented agents to provide English and Spanish coverage for all your live answering needs. We’ll take every conversation on your behalf and integrate right into your website or e-commerce platform. 

Plus, our virtual receptionists will handle everything from simple questions and inquiries to lead screening, payment collection, scheduling, and even new client intake. Ask how we can serve as the face of your brand to change how your brand handles customer service for the better. Then, ask how we can take it one step further to help you develop a custom strategy for your communication needs that’s within your budget and still fits your needs. 

You can do that when you schedule a consultation to discuss your needs for 24/7 live chat and other messaging services, and how we can take your communication to the next level. You will also find us at hello@smith.ai or when you call (650) 727-6484.