How to add Voice Messaging to Squarespace for Visitor Chat and Customer Service

Customer Service Chat for Squarespace with Voice Messaging

When customers and visitors want to talk to you via your Squarespace website, telbee's voice messaging makes it easy and convenient for them and you, whether they're looking for sales support, customer service or just to chat. Voice is much more personal and meaningful than text - as well as faster than typing. Voice messaging means that customers can say what they want and get on with their day, 24/7, without the frustrations of waiting in call centre or live chat queues and being passed between people, and the right person in your team can respond when they're ready.


Adding telbee voice messaging to your Squarespace website is easy with the code snippets given in our Install Plugin box. To start with, you will need a Plugin Channel (rather than a Hosted Page):

1. Create a Plugin Channel

From the My Channels area of telbee (in the top menu), click:

Then:

Once you've customised and published your channel, you will see the Install Plugin box where you will find the Code Snippets needed to install your channel on Squarespace, one on each tab. You can click the Copy Snippet button to put the right Code Snippet on your clipboard:

Install Plugin box in telbee with code snippets

You can always get back to the Install Plugin box by clicking View Plugin Code in the channel row from the Channels List

2. Add your telbee channels in Squarespace:

There are 3 ways to add a telbee channel in Squarespace:

A. Embed as an iframe: Have the recorder visible all the time to maximise visitor interaction. No tab/button is shown

B. Use telbee's tab/button: Add the tab/button you customised in the Channel Editor for visitors to click to bring up the recorder

C. Use your own trigger: Hide the telbee tab/button, and use another element in Squarespace (e.g. an image, a button, a text link) to bring up the recorder

Each of these involves adding a Embed Block in Squarespace, and then clicking on </> to use the Embed Data option:

Adding an Embed Block in Squarespace

Choosing the Embed Data option in Squarespace


Here's how to use each of the 3 channel installation options in Squarespace:


A. Embed as an iframe:

  • Add an Embed Block and, for the Embed Data, paste the code snippet from the Embed widget directly on page tab of telbee's Install Plugin box:

Embedding telbee channel as iframe in Squarespace
  • If you want to resize the telbee recorder, you can change the "452" in the width to make it larger or smaller. You will then also need change the "482" in the height so that the full recorder is displayed without blank space at the bottom, and may need to change the size of your section in Squarespace to match

B. Use telbee's tab/button:

  • Add an Embed Block and, for the Embed Data, paste the code snippet from the Your Plugin Snippet tab of telbee's Install Plugin box:
Adding a channel with telbee's tab or button in Squarespace
  • The Embed Block itself will be small and will contain no visible content


C. Use your own trigger:

  • Add an Embed Block and, for the Embed Data, paste the code snippet from the Use Own Trigger Button tab of telbee's Install Plugin box - this Embed Block itself will be small and will contain no visible content
  • You will need to add a particular Class to any element you want to trigger the telbee recorder. You can see, select and copy this from the Install Plugin box (highlighted in orange):
Class to trigger recorder in telbee Install Plugin box

  • For each element that you want to trigger the telbee channel, add it as HTML in an Embed Block using Embed Data, including the Class from above needed to trigger the recorder. For example:

Adding an element to trigger a telbee plugin in Squarespace