How to install Facebook Messenger customer chat plugin to Squarespace
Thanks to Facebook, small companies and organizations can easily manage their digital presence even on-the-go. You can keep your customers up-to-date with your products and campaigns, show & edit your opening hours quickly and have direct conversations on Messenger platform.
We’ve compiled this post so that you can add your own Facebook Messenger chat bubble on your Squarespace site – when a customer goes onto your Squarespace site, they can send you a Facebook message with this very handy integration!
So keep on reading, this is how you can install Facebook Messenger chat to Squarespace site:
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.
Note 2! 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 javascript SDK code from Facebook Documentation right after the opening <body> -tag like this:
Step 2: Whitelist your domain
If it was this easy, anyone could connect your Facebook account on their website. To avoid this you must define 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 your page) -> Settings -> Messenger platform -> Scroll to "White-listed domains" section and add your website url there. Should look like this:
Step 3: Add the Messenger chat plugin code
With Facebook Messenger you can select what is the message to display to visitors.
It might be a good idea to make this greeting 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.
Next, 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 small business and we 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.