How to Add Live Chat to Squarespace?

Luis Manjarrez
by Luis Manjarrez

Everyone has a website these days. How can you make yours stand out from the crowd? I think there are three principal elements; First, offer a great product. Second, create a beautiful website, and third, deliver outstanding customer support.

Squarespace is a website builder that allows people to easily create alluring websites in a short time and without any coding skills. They've distinguished themselves by their aesthetic pre-built templates that cater mostly to the creative industry. By building a website with them, you're on the right path to standing out from the crowd!

Now let's talk about customer service. In today's fast-paced world, customers expect fast, reliable service. With so much competition out there, failing to do so can result in decreased brand loyalty and fleeing customers.

In the online world, live chat is often the most effective channel of communication. According to eConsultancy:

Live chat has the highest satisfaction levels for any customer service channel, with 73%, compared with 61% for email and 44% for phone.

In other words, live chat = happier customers.

In this article, we will explain how you can add live chat to a Squarespace site.

Choosing a live chat service to add to Squarespace

There are many options out there. But if you are part of a small/medium team that is looking to collaborate around live chat, email, and other communication channels, then Missive is the way to go.

Missive Live Chat is powered by Twilio. Right off the bat, it is free, and you can have up to 200 active chats per month. After that, you will pay a low fee, starting at $0.03 for each additional one.

Setting up Missive Live Chat

Once you have created your Missive account. Go to your Settings and click Accounts then Add account.

Select the Missive Live Chat option.

Select Missive Live Chat as the account provider

As we stated before, Missive Live Chat uses Twilio's Conversations API, so you must first sign up to Twilio. Monthly fees (after the 200 active chats per month) will be charged to your Twilio account.

Once you've signed up, you will have access to the dashboard, where you will be able to see two important pieces of information: your Account SID and Auth Token.

Live Chat Twilio dashboard

Back in Missive you can continue the process.

Missive is, above all, a tool to collaborate around different channels. You will be asked to choose whether you want the chats shared with teammates or not.

Choose to share the Live Chat account

We suggest you choose the first option and share it in a Team Inbox. This will lead all incoming chats into a shared inbox where many teammates can assign cases to each other and work more efficiently.

Choose a team to share the Live Chat

After that, you will need to enter the Account SID and Auth Token from your Twilio account as well as a Chat service name.

Add the Twilio Chat keys

Your live chat is almost ready to be plugged into Squarespace.

Missive Live Chat successfully added

Setting up Missive Live Chat in Squarespace

It's quite easy to install Missive Live Chat in Squarespace.

STEP 1

Go to your Squarespace Dashboard > Settings > Advanced > Code Injection

Missive Live Chat code injection Squarespace

STEP 2

Go back to Missive and copy the account id from the code snippet. You can find it in Settings > Accounts > Missive Chat > Setup > Code Snippet.

It looks like this number:

2846475-c2324-232344-235-dsfds34ffdf233

Live Chat code snippet

STEP 3

Go back to Squarespace and paste the code in the HEADER tag.

Live Chat code snippet

Congratulations! You now have a live chat on your website. But it's not in sync with the site's branding. Yet.

Live Chat in Squarespace

Customizing the live chat window

Inside the Missive Live Chat settings, you can:

  • Change the main color
  • Customize various messages such as welcome, help, error, title, etc.
  • Change the position of the bubble
  • Show online status
  • Show avatars
  • Show names
  • Ask for name and/or email
  • Require name and/or email
  • Change the bubble messages
  • Change the User Interface messages
  • Identify and verify users
  • And more

The widget is highly customizable. For all options, see the documentation.

Here's the final version of our chat bubble. It looks great, right?

Managing the live chat

Missive Live Chat is the perfect way to interact with visitors and users from your website without creating additional silos of communication.

Whenever someone sends a message through the live chat on your website, it will instantly appear in your Missive app, and like all other channels (email, SMS, social media messages), you decide where these messages land. You may choose for them to arrive in a Team Inbox or everyone's Inbox.

Missive Live Chat offers you fantastic features:

  • Identify visitors & authenticate users
  • One-to-many interactions
  • Customizable widget
  • Schedules
  • File exchange
  • Automation
  • Read status
  • Attach and display metadata
  • Emojis

Go here to learn more about each feature.

We hope this article helped you add a live chat to your Squarespace site.

You now have the tools to create a great website and offer fantastic customer support. Now focus all your energy on developing an excellent product or service!

Luis
Luis Manjarrez

Growth at Missive
Follow me on Twitter