The Whisbi experience

The Whisbi experience allows your website visitors to talk to your company experts in real-time.
To achieve this, we developed two products that can be combined: One-to-Many and One-to-One.

How does it work?

One-to-Many enables your presenters to communicate with the entire web audience through live video chat.
Online visitors can interact with the presenters anonymously in real time, by asking questions via the chat function.

Our One-to-One solution allows engaged web visitors to have a private conversation with your brand experts, who can answer all of their questions and even show your products in real time. This provides a more personalized experience for your online customers and improves conversions as a result of Face-to-Face interactions online.

Although you can implement One-to-Many and One-to-One solutions as stand-alone tools, companies typically achieve better results when combining the two solutions on a single widget.

Interface


The user interface is basically divided in two main elements: the Floating button and the Sidebar.


Default


Floating button


The floating button is a Call-to-Action button (CTA) that customers will see on the bottom right corner of their screen. It’s an automatic message that looks like a natural chat message, written by one of your agents and encouraging the customer to use the Whisbi service.

The floating button appears in both the One-to-One and the One-to-Many services, with slight differences.

Note
You can also launch the Whisbi widget from your own website. Learn how to do it here.



Sidebar


The sidebar is the area where all the Whisbi experience takes place. There, the customer can talk to the expert and see the products and content that the expert shares.

This widget can hold both the One-to-One and the One-to-Many services, with some differences.


One-to-Many


One-to-Many is a service that allows a presenter to explain or showcase your products via real-time video while many customers ask questions.


The main features that this service includes are: real-time video, image and video sharing and chatbot.

Chatbot


The chatbot is one of the features of the One-to-Many service. It’s a conversation-like message that appears during the broadcast, leading the user where you want them to go, to either a One-to-One service to talk with an agent or to a specified URL. You can see how to customize the chatbot here.

Default



One-to-One


One-to-One is a service that allows the customers to talk directly to an expert via phone or chat, while they can keep seeing the products in real-time video.


The main features that this service includes are: chat, phone call, real-time video, image and video sharing, cobrowsing and 3rd party phone calls. All these features can be done directly from your website and the customer doesn’t need to install any external software or plugins.

Beside the visual aspects, this service has some customizable options and features included: One-to-One form, Inbound, Call me back, Agenda, Pin to Whisbi, and the One-to-One chatbot.

One-to-One form


The most common way to start a One-to-One session is by filling out the form. According to whether the user provides a phone number or not, the session will be either only-chat or a combination of chat and a phone call. You can see how to customize the One-to-One form here.

Default


Note
You can create you own form on your website to launch and start a Whisbi One-to-One session. Learn how to do it here.



Inbound


This is an option for One-to-One that allows the customer to make the call instead of providing their phone number in order to be called. When this option is enabled, all the information needed to make the call is shown below the One-to-One form. The customer can call to the phone number displayed and then a recorded message will ask them for the pin number to sync the call with the desktop experience. In this case, both the call and the session are trackable. You can see how to enable the Inbound option here.

Default



Cmb (Call me back)


When this option is enabled, the form is shown even beyond the scheduled service hours. If a customer fills out the form during that time, they will be called once there is an agent available. You can see how to enable the Call me back option here.

Agenda


With this option enabled, the customer can schedule a call whenever they want. This option appears below the regular One-to-One form and can also be set as the default form outside of your service hours. You can see how to customize the agenda here.

Default



Chatbot


We have added a new way to generate One-to-One sessions: the chatbot! If this option has been enabled and configured, the customer will answer some predefined questions instead of filling out a regular form to open a session. Depending on your customer’s answers, they will be redirected to the teams that can best answer their request. Your customer can also choose to either start a chat session or a phone session.

This option is currently in development phase so not all the One-to-One features might be available through the chatbot. You can however see the full range of options available as well as how you can customise them here!

Pin to Whisbi


This feature connects any regular phone call to an online interactive One-to-One experience. During a phone call, an agent can ask the customer for a pin number that appears at the bottom left corner of your website or at pin.guru. By entering this pin number to the Whisbi platform, a One-to-One session will open on the customer' screen. You can see how to enable the Pin to Whisbi here.

Default



Rating type


Once the One-to-One service ends, there is a short survey that allows the users to give feedback on the service provided. There are two main kinds of surveys: Net Promoter Score and Service Rating.

Net Promoter Score (NPS)

It measures the client satisfaction with one single question: an indication of the service provided growth potential. The question is “How likely are you to recommend the service to a friend?”, which can be answered on a scale from 0 (not at all likely) to 10 (extremely likely). The customer can also add a comment to explain the reasons for their score, as well as any suggestion or complaint. This rating type is available in two versions: with emojis or with dots.


Default



Service Rating

It allows the customer to evaluate, from 1 to 5 stars, different aspects of the service provided. These aspects are: promptness, politeness, efficiency, quality of the session, level of knowledge and understanding of the customer needs.


Default



You can see how to customize the rating type here.


Getting started



By using this reference guide you will be in control of all the visual aspects of your widget: colors, texts, fonts, imagery and certain button actions.

Before you start customizing your Whisbi widget there are a few things you will need to prepare.


Unique IDs



To get started, get the following IDs by requesting them from your designated Customer Success Manager.

API Key
This unique ID will allow you to access your account in the Whisbi cloud.

Seed
This ID defines which services should be used on the widget (One-to-One and/or One-to-Many).
A seed is an ID which enables the widget to pull all the necessary configurations for your service, like the channel to display in One-to-Many or the telephony and agents configuration for One-to-One.

In the case of a One-to-One service, you only need to provide a primary seed.

For a One-to-Many service, you can provide also a secondary seed if you have a One-to-One service to which you want to send your users to. If provided, the viewers will be prompted to have a One-to-One session, which will be loaded in the same widget.

Media Gallery ID
With this ID you will be able to load your Whisbi library with images and videos which can be used during a session.

Find more about the Whisbi widgets configuration on the Help Center article for One-to-One and One-to-Many.

Preparing your script

Now that you've gathered the information of apiKey, primarySeed, secondarySeed and mediaGalleryId, you are ready to start building the script to use the Whisbi widget on your website.

A good practice is to create a specific .js file which you will then load on your website. In this example, we will call it whisbi.js.

Once you have created the .js file, add the following code to you script. This will allow the Whisbi widget to be executed and displayed as soon as the script is loaded on the browser.

Here we are creating an empty config variable, which will be filled out in the next step in order to configure the widget to use your own service. Note that in the case of a One-to-Many service, you will only see the Whisbi floating button when you are broadcasting.

(function (win, doc) {
  var config = {};

  var s = doc.createElement('script');
    s.type = 'text/javascript';
    s.src = 'https://widget.whisbi.com/template/launcher.js';
    s.onload = function () {
      win.whisbi.setup(config);
    };
    doc.getElementsByTagName('body')[0].appendChild(s);
}(window, document));

Inside this function you will create a variable to configure your widget with the list of IDs you got from your Customer Success Manager and the version of the API.
This will allow your widget to be displayed in the browser using the default Whisbi customization (colors, texts, etc).

(function (win, doc) {

  var config = {
    version: '1.3.0',
    api: {
      apiKey: 'your Whisbi API ID',
      primarySeed: 'Your One-to-One or One-to-Many Seed ID',
      secondarySeed: 'Your One-to-One Seed ID if applicable, false otherwise',
      mediaGalleryId: 'Your media gallery ID for the corresponding service',
    },
    general: {
      texts: {
        companyName: 'Your company\'s name'
      }
    }
  };

  var s = doc.createElement('script');
  s.type = 'text/javascript';
  s.src = 'https://widget.whisbi.com/template/launcher.js';
  s.onload = function () {
    win.whisbi.setup(config);
  };
  doc.getElementsByTagName('body')[0].appendChild(s);

}(window, document));

Now that you have the basic configurations of your Widget, you can go to the HTML file of the page where you want to display the widget and add a script tag calling the whisbi.js file created before:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script src="./whisbi.js"></script>
  </body>
</html>

Now you have a basic widget using your own Whisbi service and you are ready to fully customize it. You will find the full reference of the available customization options here.

Note
You can now open your page and see your widget. Note that you need to open the page from an HTTP server, because it performs HTTP requests; the widget will not work when opening directly from your hard drive.




Launch the Whisbi widget from your own website

You can launch the Whisbi widget by using this code:

whisbi.openWidget();

Depending on the parameters set, it will open a One-to-Many broadcast, a One-to-One form, or start a One-to-One session (in this case the data must be collected through your own form).











































Version Description Required

action

String


The process that will be triggered. 'oneToOneWidget' to open the widget with a One-to-One form,'oneToManyWidget' to open the widget with a One-to-Many broadcast, 'oneToOneSession' to open the widget and start a One-to-One session using the parameters sent. (phone, country, name, email or legalReference).



Mandatory



phone

String


The customer’s phone that will be used to start a One-to-One session. It’s the phone number where the call will be made to. The format must be the country code followed by the phone number. If the phone is set, it will start a call session, and if not, a chat session.



Optional



country

String


The customer’s country code that will be used to start a One-to-One session. This is only necessary if the country code has not been provided with the phone.



Optional



name

String


The customer’s name that will be used to start a One-to-One session.



Optional



email

String


The customer’s email that will be used to start a One-to-One session.



Optional



hasGDPR

String


If true, the GDPR will be shown and must be accepted by the customer before starting the session.



Optional



Default: false

Note
When using the 'oneToManyWidget' action, please use the events to display it exclusively when there's a live session running.

EXAMPLES

Open One-to-One form

whisbi.openWidget({action: 'oneToOneWidget'});

Open One-to-Many broadcast

whisbi.openWidget({action: 'oneToManyWidget'});

Open One-to-One session with the data provided and legalReference

whisbi.openWidget({
  action: 'oneToOneSession', name: 'Kevin', phone: '+34666666666', legalReference: 'my_legal_reference'
});

API Changelog


The following table lists significant updates and modifications to the Whisbi API. If a variable is modified, the old values will still be valid unless stated.











































































Version Description

v1.19.0

November 22, 2018


Added onDesktop, onMobile, marginX and marginY parameters on the General Config floating button styles section which allows to set the position of the Floating Button



v1.18.0

November 12, 2018


Added new textColor parameter to the General Config header styles section.


Added new oneToOneDisplay parameter to the One-to-many Config section.


Added new videoOverlay style to the One-to-many Styles Config section.



Chatbot config v3.3

October 31, 2018


Added documentation for version 3.3 of the chatbot it includes a new action type end and a new parameter resultCode for node message_simple and message_link.



Chatbot config v3.2

October 8, 2018


Added documentation for version 3.2 of the chatbot , which includes the new field types input_text and select on the node type message_session_data.



v1.17.0

September 10, 2018


Added new outOfHoursConfigURL option to the One-to-One Chatbot Config section.


Added the documentation of the chatbot version 3.1 , which includes a new node type message_inbound, and changes in the structure of the node type message_session_data.



Chatbot config v3.0

August 23, 2018


Added new link for Chatbot v3.0 documentation inside One-to-One config section.



v1.16.0

August 22, 2018


Added new defaultUserPictures option to the One-to-One Config section.



v1.15.0

July 19, 2018


Added new link to chatbot version 2.1 inside Chatbot config section.


Renamed API parameter hasGDPR to legalReference in the API config section.


Removed property GDPRType from the General config section. Legal agreements will always be presented in a new screen


Added new event otoPinCodeGenerated to the events section.


Renamed event transferScreenShowed to otoCallTransferred in the events section.


Recovered parameter playerText inside API config to allow customers to change "Join live broadcast" text inside the mobile version of the One to Many.



v1.14.0

July 10, 2018


Added new backgroundImage option to the One-to-One styles section.



v1.13.0

June 21, 2018


Added api.simplyBook to get available dates from Simply Book.


Added general.styles.floatingButton.collapseType to determine where the customer has to click to collapse the conversation bubble.



v1.12.0

June 21, 2018


Added new property direction inside styles config which allows set experience in RTL (right to left) or LTR (left to right).


Added the option to add an extra field to One-to-One forms, both the main form and the call scheduling form.


Added new property firstDayOfWeek to oneToOne.schedule in order to set the first day of the week in the calendar.


Added new method to launch Whisbi widget from your own website.


Added new variable customInboundAction to the oneToOne section of the config.


Added new events otoInboundClicked and otoInboundToWhisbiLoaded to the events section.



v1.11.0

May 25, 2018


Added oneToMany.visibilityType in order to disable the option to rate the agent.


Added new entry for GDPR inside API Config and General Config section.


Added customizable cookies expiration time to the API Config section.


Added option to disable Google Analytics tracking to the General Config section.



v1.10.0

May 15, 2018


Added oneToMany.visibilityType in order to hide One-to-Many floating button.



v1.9.0

May 1, 2018


Added new event transferScreenShowed to the events section.



v1.8.0

January 20, 2018


Added oneToOne.form.conversationalMode in order to ask for data in a conversational mode.


oneToOne.schedule.emailTo in order to set an email to send scheduled leads info.


Added new event widgetLoaded to the events section.



v1.7.0

January 24, 2018


Added oneToMany.disableLike in order to disable the option to rate the agent.


oneToOne.ratingType has been modified to accept both the previous values and the new ones: nps-dots, nps-emoji, service-rating, none.


Added the event events.otmNameEntered that fires when the user enters his name on a One-to-Many session.