How to Add Live Chat to Squarespace

Heads up: this post may contain affiliate links. In other words, if you make a purchase using my link, you won’t pay a dime more but I’ll earn a small commission. My chips and salsa fund thanks you from the bottom of its heart… er stomach?

If you want to increase conversions on your website, and especially during any sales periods; add a live chat to your website. That's what I'm going to show you in this week's tutorial.

There are several ways to add a live chat to your Squarespace website, including adding a Facebook Messenger to it. But if you’re not a fan of Facebook, then this method will work great. I’ll be using a tool called Chatra which makes it super easy to add a live chat widget to your website. In fact, if you ever initiated a live chat with me, you’ve seen Chatra in action as this is the tool I use and absolutely love.

How to Add Live Chat to Squarespace With Chatra

Chatra is a very cool LiveChat plugin that you can use on any website practically. It has a free plan, which is more than enough if you're using it for your sales pages and if you're just getting started. And it gives you the ability to add both an online and offline chat widget to your website. On top of that, it comes with a phone app so that you can reply to any inquiries that you get, even if you're on the go and not at your computer.

This is why I like it so much. Plus, it even gives you basic visitor info, such as their name and email that you can collect so that you can follow up with them later.

If you upgrade to the paid plan, then you can also see which country they're coming from; what page they are on during the conversation, and it also gives you this view in real time. Another cool feature of the paid plan is that you can see what they added to their shopping cart, as well as what they're typing as they're typing it.

Paid plan also comes with the option to add chat notes and saved replies so that if you have questions that you get on a regular basis, you can just use the saved replies to save time instead of typing out an answer over and over again.

As you can see, Chatra has a lot of cool features and that's why I like using it. And I find it more user friendly than the Facebook messenger that I'm not so keen on using.

Before we dive into the tutorial, I want to mention that Chatra’s paid plans start at €21 per month if you pay monthly or €17 per month if you go with the annual plan. You can also try any of their paid plans free for 10 days.

As always, you can watch the tutorial below or scroll down for the written version.

SUBSCRIBE FOR MORE VIDEOS LIKE THIS

Sign Up For Chatra

The first thing you’ll need to do is sign up for an account with Chatra. Simply follow the prompts to enter your username and set your password and create your account. Once you’ve done that, take some time to familiarize yourself with the dashboard.

Let me show you around my Chatra account and the dashboard area. As I’ve said before, I'm using the free plan, because I don't really need the automations and the triggers that come with the paid plan because I'm not using it to that extent.

I usually have it on during sales when I'm running a promotion for my templates or during a specific sale period. And I find the free version more than enough for those purposes.

Chatra Customization Options

Let’s take a quick look at some of the customization options you have available in your Chatra dashboard. You can customize your settings, which essentially allows you to control how your widget looks and the language that your chat widget is in.

You can also choose where the chat widget is positioned on your website. You have several options, whether you want to show it at the bottom, in the middle, on the left side, on the right side.You can customize the text that the chat widget comes with. The cool thing about Chatra is that it basically displays what the widget looks like when you're online and what it looks like when you're offline.

If you upgrade to a paid plan, visitors can also upload files if you need them to and they can rate your conversations. Like I said, it comes with a pretty cool set of features.

You can also choose to enable the chat button on mobile devices or to completely hide it from mobile devices. You can customize the sound that you get.

If you upgrade to a paid plan, you can have customer inquiries forwarded to your email address. And you can also connect your Facebook pages and your Instagram DMs as well so that you can reply to them directly from Chatra.

Under Preferences, you can set up where the offline messages get forwarded to, which I recommend you set that up to your main email that you check frequently. And you can also choose to enable to email full conversation transcripts to visitors.

Saved replies are where you can set up and configure any saved replies you want to use if you upgrade to a paid plan. And then under Integrations, you can integrate Chatra with with other tools like Shopify, Zapier, Cloudflare, BigCommerce, and others. But today I'm going to show you how to add it to your Squarespace website.

How to Add Chatra Live Chat Widget to Squarespace

Once you've configured your chat widget the way you like it, it's time to add it to your Squarespace website. And for that, click on Settings > Chat widget > Show setup instructions button.

This is going to give you code that you need to add to your website. Copy all of that and go to your Squarespace website. Now, where you paste the code depends on where and how you want to display the live chat. If you want the live chat widget to appear on every page on your Squarespace website, then you are going to go to Website > Website Tools > Code Injection, and paste the code in the Header area.

When you click Save, the live chat widget now appears at the bottom of the screen. And when a visitor opens it, they can send you a message and you can reply to them.

If you don't want the live chat widget to appear on all pages of your website and you just want it on a specific page, then go to that specific page and click the Page Settings icon and under Advanced, click on Header Injection, and paste the code that Chatra gave you.

When you save and refresh, your live chat widget is right here on that page. But if you go to another page, the widget won't be there.

Final Thoughts

And that’s it! As you can see, adding a live chat widget to your Squarespace website is super easy, not to mention with Chatra, you can do so for free and upgrade as your business grows. If you want more Squarespace tutorials, I have them linked for you below and if you want to learn how to launch your website with Squarespace, then click the image below to download my step-by-step Squarespace launch roadmap.