Add A Facebook Messenger Chat Box To Your Squarespace Website
Having a Squarespace chat box on your website is one of the best ways to communicate with your customers. It offers an easy way for website visitors to ask quick questions without having to fill out a contact form or dig around for your business email address.
But do you really have time to respond to all the chat messages on your website? Probably not.
That’s why I prefer integrating Facebook Messenger Chat with Squarespace! All of your messages from both your Facebook page and your website stay in Facebook Messenger, making it easier to stay on top of your chat communications.
How to Integrate Facebook Messenger with Squarespace
Before you can add Facebook Messenger Chat to your Squarespace website, make sure you have the following two things:
A business Facebook page.
You can’t set up a Squarespace chat with Facebook Messenger unless you have a business page, not just a personal Facebook profile. You will also need a business page to set up Facebook Pixel on your website.
A Business or Commerce Squarespace plan.
Adding a Facebook Messenger chat bubble to your Squarespace website requires pasting some Facebook code into your website. Unfortunately, Squarespace won’t let you inject code with a Personal plan. So if you don’t already have a Business of Commerce plan, you will need to upgrade your Squarespace subscription to add the chat integration.
Once you have these two things, you’ll be able to set up your Squarespace chat in no time! In the video below, I show you how to go into your Facebook page settings and set up the chat plugin on your website.
Note: This tutorial does use some code, but you will use the code from your own Facebook Business Page.
4 Steps to Setting Up Your Squarespace Chat Box
Once you follow the instructions in the video above, you will want to follow these four steps to make sure your Squarespace chat looks just like you want it to.
Customize your chat greeting
When visitors first land on your website, your Squarespace chat bubble will pop up with a greeting. Normally the greeting is something general, like “How can I help you?” But you can customize this greeting in the Facebook messenger settings, and give your website visitors a more personalized welcome. Make your website users feel right at home!
Customize messenger chat colors
Facebook messenger chat bubbles uses the default Facebook blue…which clashes with most brand color palettes. Fortunately, you can change the color in the settings. If you’re in a hurry, just select a color that best matches your brand colors. Otherwise, you can also put in the custom hex code for one of your brand colors, so your Squarespace chat bubble blends in perfectly with your website design.
Enter your website domain
Next, you will need to copy and paste your website domain name into the customer chat plugin settings on Facebook. You only need to enter your custom domain to ensure the chat bubble shows up on your website. But if you would like the chat bubble to pop up when you are editing the site as well, you can also enter the back-end domain for your website.
Paste the integration code into your website footer
Once you have finished customizing your chat settings on Facebook, Facebook will give you a code snippet to paste into your Squarespace website. Simply go into your website settings, select the ‘Advanced’ tab, and click ‘Code Injection.’ Here, you will see there is a box where you can paste code into your website footer. Paste your Facebook chat code into the box, and voila! You now have a Squarespace chat bubble on your website!
