How to Add Facebook Chat to a Squarespace Site

2023-02-14

Squarespace is a great choice for web hosting for SMBs and brands on a shoestring budget. It’s also preferred by eCommerce brands that want a simple interface for their own use and a user-friendly platform for their audience. And the website host is continuing to do that with this Facebook Chat plugin integration that makes it easy to chat with customers via social media, right on your website. 

The average customer prefers to interact with a brand via live chat to the tune of 46% of those who were surveyed reporting they like live chat over other communication methods. Some people also prefer social media because it feels like a more personal connection than a static business website. When you integrate the two, you’ve got a winning combination. 

Social media is changing the way that customers are supported, and people get in touch with the brands that they use or want to consider doing business with. It’s likely going to be a positive change for the global marketplace as people get back to connecting and stop feeling like just another number in just another superstore. 

When you integrate the Facebook Chat feature, you cut out the middleman and take away that stuffy “business” appearance and take your brand back down to earth. Then, and only then, will your customers feel comfortable enough to contact you. (And if you’re short on time, let our live chat agents act as the face of your brand and answer all of your customers’ questions and concerns, 24 hours a day)

Social media support is rising

Today, social media is changing the way that people do all kinds of routine things. One of those things is getting customer service and support. As more people see social media as a means of doing this, they are going to continue to seek more streamlined solutions and better processes for reaching out. That leaves brands in a position where they have to adapt and start thinking of social media in a totally different light. 

46% of people would rather use live chat than another form of communication. And, more than 65% of people prefer to contact brands on social media as opposed to other mediums. So, as you can see, the case for social media tools like Facebook Chat is clear. People want custom communications with a personal touch, and they want a familiar space for it to happen in. With Facebook Chat and other tools, that’s getting easier than ever before. 

The Facebook Chat plugin

The highlights:

  • Facebook has a dedicated Chat integration for Squarespace that is designed to implement seamlessly
  • New guest mode feature allows all customers to contact your business, even without a Facebook account
  • The app will sync conversations across platforms so that you never miss a beat 
  • The features include things like FAQs, auto replies, availability scheduling, and more

The Facebook Chat plugin is becoming a very popular conversation topic as more brands look to embrace the future and take their digital technology a step further. This open-source tool is backed by Facebook and a community of developers constantly striving to make the process better and more useful. That's something that you need to take advantage of. There's a simple instructional for Squarespace pages, and even for the pages that aren’t integrated this is an easy way to get chat on your pages without the heavy lifting. 

The Chat plugin is capable of being used on almost every web browser and mobile browser except for Internet Explorer. It also won’t work through the in-app browser in your Messenger platform, just FYI. It will, however, help you keep the conversation going and make sure that the installation and setup are quick and painless. 

Just publish your Facebook Pages social page if you haven’t yet, and then copy the nice little strip of code from the settings and put it on your Squarespace website in the appropriate place (more on that later).  

Setting up your Facebook page

Setting up the Chat feature from Facebook on your website is a fairly simple process. You can do it all right from the “Settings” on the page and be ready to go in a matter of minutes. Simply head over to the settings and find the “Messaging” section. Then:

  1. Choose “Add Messenger to Your Website”
  2. Select “Get Started” 
  3. Navigate to “Setup Your Chat Plugin and click “Set Up”
  4. Select your language
  5. Add your website domain
  6. Copy the code that you’ll need for your Squarespace settings 

Feel free to check the other settings before finalizing things. These include things like customizing your greeting, setting away messages, creating hours and availability, and even setting up FAQs for quick answers for your audience. You can also use the “Customize” feature to customize colors, appearance, alignment, and more. 

Of course, even though it’s an option, we do not recommend (or does Facebook) that you move the location of the chat icon from the corner of your screen on the bottom right. 

After you finalize all the settings, you can click “Finish” and “Done” to save your settings and close the window accordingly. You can then also return and edit anything that you like at a later time. For now, you can navigate away from there (but remember to copy the code that you’ll need first). 

Integrating on the Squarespace platform 

Squarespace has a prebuilt tool in the Settings of your admin panel that will take just a few steps so that you can get the integration listed on your website. Once you have the snippet of code from Facebook, you will be able to head to your admin panel and follow these steps:

  1. Click “Advanced” under “Settings”
  2. Click “Code Injection”
  3. Find the Footer section and paste in the code that you’ve copied from Facebook
  4. Click “Save” 

Now, navigate to the live version of your website and watch the Messenger icon appear, ready to greet your customers when they want to reach out and get in touch. Plus, all your messages will show up in your inbox on your business Facebook Page. It’s a streamlined way to keep in touch with your customers and unlike some integrations, it’s done in just a matter of minutes. 

Of course, for the brands who desire it, there is a whole selection of Developer Options and custom integrations where you can create your own unique integrations and automated workflows. 

Developer options

In addition to all of the standard settings, there’s also a developer options page that Facebook has set up just for the developers and IT gurus out there who want to integrate this platform in the customized way that they have always imagined. The Facebook for Developers page has all the details that you need to know, but we’ll cover the basics here. 

Remember that advanced programming is best left to the professionals. Plug-and-play integrations, as it were, are a great tool for the average business trying to build up their tech stack without a lot of excess work or unnecessary tasks. However, those who do want to customize can easily visit the developer options section to see what kind of tweaks can be made. 

Safelisting

If you haven’t already, one of the first things that you will need to do is safelist your domain. You can do this programmatically, or you can do it through the Facebook settings. Either way, ensure that you list your URL for your business website so that Facebook knows the site is safe and won’t block it from being accessed. 

Here's how it looks in the settings:

The code 

You may also find that you want to grab the code for your website right from the developer options page, which you can also do. The code is pretty basic and allows some modifications, and looks like this:

<div class=”fb-customerchat”

Page_id=”<PAGE_ID>”>

</div>

There are going to be some advanced features and attributes that you can integrate on the developer's page, but you have to remember that there are some things that you shouldn’t mess with. The majority of the customizations and features that you need will be found right in the settings for your Facebook page, after all. 

Another important thing to note is that you shouldn’t bother moving the location of the chat icon. It populates in the lower right corner of the screen and that’s done for a reason—that's where people look. You can do a lot with the developer options, but this is one thing that you shouldn’t change (even in the general settings). 

Other features to consider

The Facebook Chat integration offers several supported message types and other features to appreciate, and most of them are ready to use or don’t take much to set up. You can find support for things like:

  • Text messages
  • Audio and video messages
  • Images
  • GIF files
  • Attachments

There is also a URL button, Call button, and Postback button, and the tool gives you the chance to set quick replies via email, chat, or text. 

Plus, you can even track your messaging habits with the Facebook Insights feature that offers analytics for all of your Facebook activity, including what happens in the Chat plugin on your website. 

Guest Mode makes communication easy for everyone 

At first, this integration was only available to those logged into Facebook, or those who had an account that they could log into. As of late 2020, however, that changed. Now, there’s a Guest Mode feature in the Facebook Chat integration for website use that allows people to contact you even if they don’t have a Messenger account or use Facebook at all. 

The guest user will have 24 hours to view the chat transcript and re-engage with your brand and then the chat will disappear. They can also choose to terminate the chat manually. On your end, you’ll retain a record of the conversation for as long as you’d like, even if the guest account is terminated and they never return. 

The latest upgrade is perhaps the best—now, users can start in Guest Mode and then transition into the Messenger app or the Facebook inbox to continue the conversation as needed. There’s an option in the drop-down menu to do it deliberately. The app will also prompt login if users attempt to contact a business set to “away” or if they want to share an attachment (currently only available to logged-in accounts). 

This also allows your visitors to get started right away and then log in later so that they don’t have to deal with the hassle of usernames and passwords when they just want to get in touch really quickly. 

Let the team at Smith.ai field your chats and more 

You’ve got a lot on your plate. You hardly need one more tool to manage, and yet your customers are demanding it. You can’t just skip it-- so what are you to do? Partner with our team at Smith.ai and get all of your live chats and other needs handled by our live chat agents. 

Smith.ai offers a far more comprehensive live chat solution that will take care of every aspect of digital communication, from SMS texts to everything in between. We even include the software with the team of service experts, and provide total coverage for live answering in English and Spanish. We’ll answer every conversation on your behalf to build the face of your brand and we can even work with any website or e-commerce platform. 

Whether it’s a few basic questions or services like intake and lead screening, appointment scheduling, and even payment collection, we can deliver by being the face of your brand to handle it all. And we’ll even help you create the perfect custom strategy to handle it all within your budget and your means. 

Schedule a consultation now to ask how our live chat agents can take your chat answering to the next level and beyond. You can also find us at hello@smith.ai or (650) 727-6484.

Tags:
Business Education
Facebook Messenger
Written by Sean Lund-Brown

Sean Lund-Brown is a current Marketing Assistant for Smith.ai. A graduate from Metropolitan State University of Denver, Sean graduated with a BA in Music and an individualized degree in Teaching Vocal Pedagogy.

Take the faster path to growth.
Get Smith.ai today.

Affordable plans for every budget.

Take the faster path to growth.
Get Smith.ai today.

Affordable plans for every budget.