How to Set Up the Free 2022 Facebook Messenger Chatbox on Squarespace

Looking to create customer engagement on your website? Live chat boxes offer a fantastic solution by enabling real-time interactions, making it easier for visitors to make informed purchase decisions quickly.

While various third-party plugins are available for this purpose, we recommend using Facebook Messenger. It's not only free but also incredibly simple to integrate into your Squarespace site. Additionally, if you're already using Facebook for your business, it provides a convenient way to engage with customers in real-time without the need for yet another platform.

Before we dive in, make sure you have a Facebook Business account. If you don't have one, you can sign up here. If Facebook isn't your preference, alternative options for adding a chatbox to your Squarespace site are available, but they might come with a monthly cost.

Furthermore, ensure you have a Squarespace Business plan as we'll be copying and pasting some code from Facebook to your Squarespace site (don't worry, it's a straightforward process) – this functionality requires the Business plan or higher.

Please note that Facebook's interface for accessing this chat feature has been updated recently, so we've provided the most accurate instructions as of November 2022.

Configuring Facebook Messenger Chatbox on Your Website

Let's first set up the Messenger feature on Facebook to generate the custom code for Squarespace.

Begin by ensuring you're logged into your business's Facebook page. Access your Facebook Page's Meta Business Suite Inbox directly with this link. Here, you can conveniently manage all Facebook and Instagram comments and DMs.

Within the Meta Business Suite Inbox window, click the Gear icon at the top right.

Navigate to the View all settings option in the Inbox Modes drop-down menu.

Proceed by clicking Chat Plugin from the left-hand navigation menu.

Now, let’s establish the Website domain, also previously recognized as whitelisted domains. Input the domain of the website where you want the Facebook Chat Plugin to be visible.

Click the edit icon to modify the Website domain settings.

A pop-up window will appear where you can enter the full website domain for the Chat Plugin's display. Save your changes once completed.

For additional functionality, consider adding your Squarespace-built domain. This allows the chat plugin to be visible in both live mode and site editing mode. You can find your Squarespace-built domain by logging into your Squarespace site and copying the domain from the address bar (excluding anything following ".com/"). Alternatively, locate this in Squarespace under Settings > Domains.

Now, it's time to personalize the Facebook Chat Plugin!

Configuring Chatbox Automations

Now, let's dive into setting up automations for your chatbox. Automations are predefined messages that your website visitors will encounter when they engage with your chatbox.

To get started, click the arrow icon next to the 'Automations' section, unveiling a range of options.

Away Hours: Synchronize your chatbox with your working hours. If you have specific hours of operation, the chatbox will notify visitors when you're unavailable outside of those hours. You can enable or disable this feature as needed.

Greeting: Craft a personalized message to welcome visitors to your site as they initiate a conversation.

Welcome Message: Establish a custom message to kickstart the conversation with your website visitors.

Frequently Asked Questions (FAQs): Implement a set of frequently asked questions to enable automated responses, reducing the need for constant manual management."

Feel free to let me know if you'd like any further adjustments or if you have more content to rephrase.

Adjust Your Chat Plugin Settings

Now, it's time to have some fun with the appearance of your Chat Plugin!

Click on the arrow next to the "Customize your Chat Plugin" section to reveal the customization options.

You'll find several ways to make your chat plugin match your website's branding. While making changes, you can see real-time previews in both desktop and mobile formats using the sample plugin on the right-hand side.

Let's explore the customization options for your Facebook Chat Plugin:

Guest Chat:

Enable or disable this option to allow people to chat with your business, even if they're not logged into Facebook.

How to add a chatbox to your Squarespace site for free - guest chat

Preset :

Adjust the chatbox plugin's color to match your website by using hex color codes.

chatbox color:

Chat Button: Choose the display and style options for the Chat Plugin button.

chat button:

Prominence: Decide how you want the chatbox to appear to visitors, whether as a small icon or with a welcome message to start conversations.

chat box prominence:

Chat Button Size: Select the button size for both desktop and mobile.

Chat button size:

Chat Window Size: Pick between the Standard or Compact chat window size.

Chat window size:

Play with alignment and margin values to control the chat box's placement on your website.

Chatbox position:

Once you're satisfied with the look and feel of your chatbox, click "Publish."

Copy Your Chat Plugin Code

We're on the verge of adding the chatbox to your Squarespace site, but there's one last step: grabbing the code from Facebook.

Click the blue "Set Up" button located at the top of the Chat Plugin section on Facebook.

A pop-up window will appear, prompting you to select a setup method. For Squarespace sites, choose "Squarespace."

From the drop-down menu, select the default language for your chatbox. Then, click "Save & Continue."

Re-enter the domains you previously set up in the Advanced Messaging section if they don't appear automatically. Begin by entering the domain for the website where you want the chat plugin to appear. You can also add your built-in Squarespace domain as an option. This will enable the chat plugin to function both on the live website and within the Squarespace editing interface.

If the domains are automatically detected and accurate, click "Save & Continue."

Facebook has now generated custom code that you'll need to add to your Squarespace website. Copy this code and click "Next." All that's left is to paste this code directly into your website. Click "Finish" and then "Done," and let's move on to Squarespace to integrate the Facebook Chat Plugin code into your site!

Insert the Facebook Chat Plugin Code

Access your website settings and navigate to Settings > Advanced > Code Injection.

Paste the code provided by Facebook into the Footer section and click Save. The chatbox plugin should become visible, but you might need to refresh the page to activate it.

Now, you're all set to engage with your website visitors using Facebook Messenger!