How to add telbee Voice Messaging for Voice Chat on Wix

Adding telbee to Wix websites - Embedded, like Wix Chat or your own trigger

telbee's voice messaging makes it easy and convenient for customers to talk with you via your Wix website, whether they're looking for sales support, customer service or just to chat. Voice chat conversations are much more personal and meaningful than text, and more convenient for you and your customers than live calls.

Adding telbee voice messaging to your Wix website requires a few extra steps from those in the Install Plugin box, but we've got a script that makes it easy and this guide to walk you through it. 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:

Install Plugin box in telbee with code snippets

Once you've customised and published your channel, you will see the Install Plugin box where you can find the Channel Code you need to install your channel on Wix (highlighted in the orange box below). You can select this code and copy it to your clipboard when needed:

Install Plugin box in telbee with Channel Code

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 telbee's Wix script on All Pages

However you want to add telbee to your Wix site, we've got one script that will make it work. You need to add this using Wix's Custom Code feature (available on any premium plan). You access this via the Settings area in your Dashboard:

Navigating to the Custom Code area in Wix


Click + Add Custom Code and you will see this box (blank initially - the screenshot shows it completed):

Custom Code box in Wix

Here is the code snippet to use:

<script src="https://storage.googleapis.com/telbee-assets/telbeewix.js"></script>
  • Add code to All pages, Load code once
  • Place code in Head

Please note: Because of the way Wix works, even if you are only adding a telbee channel to one of your pages, you still need to install this script on all pages. Otherwise you may find that visitors sometimes cannot use their microphones.


3. Add your telbee channels in Wix:

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

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 Wix (e.g. an image, a button, a text link) to bring up the recorder

You can use multiple channels on any Wix site or page, though you can only have 1 own trigger channel per page.

Here's how to install telbee channels in Wix using each of the 3 options:

A. Embed as an iframe:

  • Add an Embed > HTML frame element in Wix:

Selecting a Custom Embed in Wix

Wix embed code box

Here is the code to use in the HTML frame:

<iframe width="100%" height="100%" style="border: none" src="https://telbee.io/channel/CHANNEL_CODE/?isFrame=true" id="telbee-main" allow="microphone" class="active"></iframe>
  • However, where it says CHANNEL_CODE, replace that with your Channel Code from the Install Plugin box (see top of this guide)
  • You can resize the HTML frame and the telbee channel will resize to match the width - make sure the frame is high enough to show the whole lot
  • telbee's custom code above will make sure this iframe has microphone permissions so your visitors can record - without it their microphones will likely be blocked.

B. Use telbee's tab/button:

  • Add another piece of Custom Code as at the top of this article:


Here is the code snippet:

<script type="text/javascript">
telbee_addtabbutton('CHANNEL_CODE');
</script>
  • However, where it says CHANNEL_CODE, replace that with your Channel Code from the Install Plugin box (see top of this guide). Make sure you leave the ' symbols either side of the Channel Code
  • Add code to the specific pages you want the channel to be on
  • Place code in Body - end


C. Use your own trigger:

  • Add another piece of Custom Code as at the top of this article:

Here is the code snippet:

<script type="text/javascript">
telbee_addowntrigger('CHANNEL_CODE');
</script>
  • However, where it says CHANNEL_CODE, replace that with your Channel Code from the Install Plugin box (see top of this guide). Make sure you leave the ' symbols either side of the Channel Code
  • Add code to the specific pages you want the channel to be on
  • Place code in Body - end


  • Within Wix, make any element that you want to trigger the telbee channel link to 'https://www.telbee.io/open-vox' - this can be an image, a button, text or anything else, and can be multiple items

Adding a link in Wix to trigger a telbee channel
  • This is not a real link, but a placeholder - telbee's code will find any items with that link and change them to trigger the telbee channel instead.