Developer/IT > Whisbi API > API Guides > Preparing your script

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));

 Copy Code

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));

 Copy Code

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.

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();

 Copy Code

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).

VersionDescriptionRequired
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

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'});

 Copy Code

Open One-to-Many broadcast

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

 Copy Code

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

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

 Copy Code