How to install Facebook Messenger customer chat plugin to Squarespace

Step 1. 

First we must install the Facebook Javascript SDK to your Squarespace site. 
Copy-paste the following code to SETTINGS -> ADVANCED -> CODE INJECTION -> HEAD

Note 1!  Code above might have changed after writing this blog post so it's best to get the latest version here.

Note2! The correct way is to
use Squarespace developer mode,
FTP to your theme,
open site.region with a text editor (We recommend Sublime Text)
Add the Facebook javascrript SDK code from Facebook Documentation right after the opening <body> -tag like this:

correct way to install Facebook javascript SDK

correct way to install Facebook javascript SDK

Step 2: Whitelist your domain

If it was this easy, anyone could install your chat on their website. Because of this, you must tell Facebook which websites are allowed to use your Facebook page messenger.

Go to Facebook -> Your Page -> (Facebook Business manager if you're using it to manage youre page)  ->  Settings -> Messenger platform -> Scroll to "White-listed domains" section and add your website url there. Should look like this:

Screenshot 2018-05-16 12.21.58.png

Step 3: add the Messenger chat plugin code

With Facebook Messenger you can select what is the message to display to visitors. 

Screenshot 2018-05-16 12.24.17.png

A great idea is to make this page specific. So if your visitor is reading about your digital marketing services, you'll have a specific Facebook messenger text for that page: 

To achieve this, go to Pages in Squarespace. Go to Page settings -> ADVANCED -> PAGE HEADER CODE INJECTION. Copy-paste code below there.

Find your Facebook page id. You can use this tool.
Edit the code above and add your page id. Replace the YOUR-PAGE-ID-HERE with your page id. 
Replace the YOUR-GREETING-TEXT-HERE section with the text you want your visitors to see on this page.

If you want to show the same message on every page, you can add the code above just once to YOUR SQUARESPACE SITE -> SETTINGS -> ADVANCED -> CODE INJECTION -> HEADER CODE
Just like when you added the Facebook Javascript SDK code earlier. 

Refresh your page and there you have it!

Support notice
We're a one person business and gotta pay our rents and groceries. Because of this we cannot offer any free 1-on-1 support for our tutorials. If you need help we'll be happy to install messenger for you:

Petri Pottonen