How to add a branded Facebook Customer Chat Icon to Your Squarespace Website

 

I'm bet every single one of you have a contact form on your site. Maybe even a couple. It's an obvious way to insure, along with posting your email address in your future, that those who visit your website have a clear way to contact you. But no matter how clear and inviting you make it, it's still asking them to take the first step. And it can feel weirdly committing and formal, especially if you're form asks for lots of details right of the bat. But how cool would it be if you could install a less committing way for visitors to contact you, in a way that allows you to automatically initiate that conversation? 

Enter the Facebook Customer Chat icon. 

This little tool allows you to selectively add a messenger tool to the pages you choose, create a more informal, accessible way for those who land on your website to reach out to you. 

And it's super, super easy to install. 

2018-08-28-h.jpg

ONE:

Go to your Facebook page, and click "settings" at the top.

Chat-1.jpg

TWO:

Click "messenger platform"

Chat-2.jpg

THREE:

Scroll down till you see "whitelisted domains" - then add your own domain and click save.

Chat-3.jpg

FOUR:

Scroll down a little more until you see "customer chat plugin" and click set up.

Chat-4.jpg

FIVE:

Walk through the set up wizard, and change the greeting if you'd like. 

Chat-5.jpg

SIX:

To make it beautifully on brand, enable "custom colors" and change the standard Facebook blue to any color you'd like.

Chat-6.jpg

SEVEN:

Continue through the set up wizard, and make sure you add your website domain when prompted. Then click the code to copy.

Chat-7.jpg

EIGHT:

Head over to your Squarespace dashboard, and go into PAGES. Scroll over the pages you'd like to add the chat icon to, and click the cog icon. 

Chat-8.jpg

NINE:

Go to the "advanced" tab, paste the code into the "page header code injection", and click save. Repeat steps 8 and 9 on all pages you'd like to add the chat icon to. 

Chat-9.jpg

TEN:

Click save and exit out of the Squarespace dashboard, and take a look at your site - a beautifully on brand Facebook icon inviting those who visit your page to reach out. Sweet! 

Chat-Example.jpg

That's it! And if you aren't a Squarespace user, you can follow the same basic steps up to your own website platform, and then just install the code wherever you install any header code. If you aren't sure how to find it, reach out to your platform's support team and ask them how. 

 
Kate DensmoreComment