Widget configuration

Widget configuration

This is the full reference of the Whisbi widget configuration options.

Methods

Setup

This reference document will allow you to customize and launch a Whisbi widget for your company.

Parameters:
Name Description Required
config whisbi.WhisbiConfig whisbi.WhisbiConfig

The configuration of your Whisbi widget

Mandatory
Example
var conf = {
  version: '1.18.0',
  api: {
   apiKey: 'Your API key',
    primarySeed: 'Your primary seed',
    secondarySeed: 'Your secondary seed, or false if not applicable',
    mediaGalleryId: 'Your Media Gallery ID',
    legalReference: 'Reference to get a unique pack of legal agreements'
    simplyBook: { company: '', apiKey: '' }
  },
  general: {
    language: 'en',
    textsURL: '',
    texts: {
      companyName: '',
      privacyPolicy: ''
    },
    privacyPolicyURL: '',
    styles: {
      direction: 'ltr',
      theme: '',
      fonts: [],
      fontFamily: '',
      textColor: '',
      linkColor: '',
      primaryColor: '',
      secondaryColor: '',
      header: {
        fontFamily: '',
        fontSize: '',
        fontWeight: '',
        backgroundColor: '',
        textTransform: '',
        textColor: ''
      },
      floatingButton: {
        borderColor: '',
        collapseType: 'button'
      },
      titles: {...}
    }
  },
  oneToMany: {
    visibilityType: 1,
    oneToOneDisplay: false,
    autoOpen: false,
    closeable: true,
    disableLike: false,
    chatbot: {
      minimumTime: 10,
      minimumChats: 0,
      externalURL: 'https://www.mycompany.com/',
      pictureURL: '',
      closeOnClick: true
    },
    texts: {
      header: 'LIVE VIDEO CHAT',
      liveHelpRibbon: '',
      videoOverlay: '20%',
      floatingButton: {
        default: {
          body: 'Do you have questions? Ask me now and get answers within few seconds!',
          yesCTA: 'Yes',
          noCTA: 'Not now'
        },
        returning: {
          body: 'Can\'t find what you need? Ask me your questions now, I\'m here to help!',
          yesCTA: 'Ask now',
          noCTA: 'Maybe later'
        }
      },
      chatbot: {
        firstMessage: {
          body: '',
          bodyNoName: '',
          yesCTA: '',
          noCTA: ''
        },
        secondMessage: {
          body: '',
          bodyNoName: '',
          yesCTA: ''
        }
      }
    },
    styles: {
      body: {
         backgroundColor: ''
      },
      floatingButton: {
        blinkLabel: {
          backgroundColor: '',
          textColor: '',
        }
      },
      liveHelpRibbon: {
        backgroundColor: '',
        textColor: '',
      }
    }
  },
  oneToOne: {
    pin: false,
    cmb: false,
    inbound: false,
    phoneType: ''
    visibilityType: 1,
    ratingType: 'nps-emoji',
    defaultUserPictures: [],
    autoOpen: {
      onDesktop: {
        enabled: false,
        closeable: true,
      },
      onMobile: {
        enabled: false,
        closeable: true,
      }
    },
    texts: {
      header: '',
      formTitle: '',
      liveHelpRibbon: '',
      floatingButton: {
        default: {
          body: 'Do you have questions? Ask me now and get answers within few seconds!',
          yesCTA: 'Yes',
          noCTA: 'Not now'
        },
        returning: {
          body: 'Can\'t find what you need? Ask me your questions now, I\'m here to help!',
          yesCTA: 'Ask now',
          noCTA: 'Maybe later'
        }
      },
      outOfHours: {
        mainTitle: '',
        subTitle: '',
      },
      thankYou: {
        mainTitle: '',
        subTitle: '',
      }
    },
    styles: {
      body: {
         backgroundColor: ''
      },
      liveHelpRibbon: {
        backgroundColor: '',
        textColor: '',
      }
    },
    form: {
      name: {
        visible: true,
        mandatory: false,
      },
      email: {
        visible: true,
        mandatory: false,
      },
      phone: {
        visible: true,
        mandatory: false,
      },
      conversationalMode: true,
      availableCountryCodes: [],
      defaultCountryCode: '',
      preferredCountryCodes: []
    },
    schedule: {
      name: {
        visible: true,
        mandatory: false,
      },
      email: {
        visible: true,
        mandatory: false,
      },
      availableHours: [
        [['10:00','17:00']], //Monday
        [['10:00','17:00']],
        [['10:00','17:00']],
        [['10:00','17:00']],
        [['10:00','17:00']],
        [], //In this case Saturdays are non-working days
        [['10:00','13:00'], ['14:00','16:00']] //Sunday
      ],
      timeInterval: 30,
      maxBookingRange: 60,
      exceptions: {
        '01-04-2017': [
          ['12:00','14:00'],
          ['16:00','18:00']
        ],
        '25-12-2017': [] //This day will be a non-working day
      },
      dateFormat: 'dd-mm-yy',
      firstDayOfWeek: 1
      emailTo: ''
    }
  },
  events: {...}
};
whisbi.setup(conf);

Type Definitions

Config Overview

Properties:
Name Description Required
version string string

The version of the configuration to be used. As of now, must be 1.17.0

Mandatory
api whisbi.ApiConfig whisbi.ApiConfig

The configuration variables that will be passed on to the underlying Whisbi API

Mandatory
general whisbi.GeneralConfig whisbi.GeneralConfig

The basic configuration of your Whisbi widget

Mandatory
oneToMany whisbi.OneToManyConfig whisbi.OneToManyConfig

The basic configuration of your One To Many widget

Optional
oneToOne whisbi.OneToOneConfig whisbi.OneToOneConfig

The basic configuration of your One To One widget

Optional
events whisbi.EventsConfig whisbi.EventsConfig

Event listeners to trigger custom actions on your website

Optional

API

This is the configuration options for the Whisbi API.
It contains all the basic settings for your Whisbi widget to launch.

Note
See Getting started for the instruction on how to get the necessary data.

Properties:
Name Description Required
apiKey String String

Your Whisbi API key

Mandatory
primarySeed String String

The GUID of the seed to use (One-to-One or One-to-Many)

Mandatory
secondarySeed String String| Boolean Boolean

If primarySeed is a One-to-Many one, you can set this to the GUID of a One-to-One seed, to send users to your One-to-One service using the chatbot

Optional
Default: false
mediaGalleryId String String

The GUID of the media gallery to use

Mandatory
legalReference String String

This parameter specifies the reference to a unique pack of legal agreements. If it is empty the default Privacy Policy will be applied.

Mandatory
cookiesExpiration Integer Integer

Maximum lifespan (in minutes) of the cookies stored by the widget in the user's browser. Defaults to one year.

Optional
Default: 525600
simplyBook whisbi.ApiSimplyBook whisbi.ApiSimplyBook

Simply Book config

Optional
playerText String String

Allow customers to change the "Join live broadcast" text inside the mobile version of the One to Many

Mandatory
Example
var conf = {
  version: '1.18.0',
  api: {
    apiKey: 'Your API key',
    primarySeed: 'Your primary seed',
    secondarySeed: 'Your secondary seed, or false if not applicable',
    mediaGalleryId: 'Your Media Gallery ID'
  },
  general: {...},
  oneToMany: {...},
  oneToOne: {...},
  events: {...}
};
whisbi.setup(conf);

Simply Book

The following are the config params for Simply Book.

Properties:
Name Description Required
company String String

Your company's name provided by Simply Book.

Mandatory
apiKey String String

ApiKey provided by Simply Book.

Mandatory

General Config

These are all the general settings that are shared between One-to-Many and One-to-One. This means that all this customisation settings will be applied to both of them.

Properties:
Name Description Required
language String String

The ISO 639-1 code of the language to display the widget in (lower case)

Optional
Default: en
privacyPolicyURL String String

The URL that redirects to your company's legal terms

Optional
textsURL String String

A URL where a valid translation JSON file is stored. It can contain all the texts of the widget or just the ones you need to change. Keep in mind that the texts customized directly on the API have priority over those in the JSON file. Request the JSON file with the default texts to your designated Customer Success Manager.

Optional
googleAnalytics Boolean Boolean

If set to false, Whisbi's Google Analytics tracking code is disabled

Optional
Default: true
texts whisbi.GeneralTextsConfig whisbi.GeneralTextsConfig

Shared texts between the One to One and the One to Many widget

Optional
styles whisbi.GeneralStylesConfig whisbi.GeneralStylesConfig

Shared styles between the One to One and the One to Many widget

Optional
Example
var conf = {
  version: '1.18.0',
  api: {...},
  general: {
    language: 'en',
    textsURL: '',
    texts: {
      companyName: '',
      privacyPolicy: ''
    },
	   privacyPolicyURL: '',
    styles: {
      theme: '',
      fonts: [],
      fontFamily: '',
      textColor: '',
      linkColor: '',
      primaryColor: '',
      secondaryColor: '',
      header: {
        fontFamily: '',
        fontSize: '',
        fontWeight: '',
        backgroundColor: '',
        textTransform: '',
        textColor: ''
      },
      floatingButton: {...},
      titles: {...}
    }
  },
  oneToMany: {...},
  oneToOne: {...},
  events: {...}
};
whisbi.setup(conf);

Texts

The following are the shared texts between the One to One and the One to Many widgets.

Properties:
Name Description Required
companyName String String

Your company's name. It is displayed at the top of the floating button.

Mandatory
privacyPolicy String String

The text explaining your legal terms that will show up in a pop-up when the Privacy Policy link is clicked. This has priority over the privacyPolicyURL.

Mandatory

Styles

This styles apply to both One-to-One and One-to-Many widget. Buttons are the main element where the brand color can be applied. You can set a primary color for the main buttons (such as CTAs) , and a secondary color for the secondary actions (Such as cancel, etc). The default color for the button texts is white, so make sure that primaryColor and secondaryColor are dark enough so that the white text can be read easily.

Properties:
Name Description Required
direction String String

The direction of the texts: from left to right or from right to left

Optional
Default: ltr
textColor String String

Color that will be applied to the main texts of your widget

Optional
primaryColor String String

Primary color for your widget, mainly used as background color of the main buttons.

Optional
primaryTextColor String String

Text color for the main buttons of your widget.

Optional
secondaryColor String String

Secondary color for your widget, mainly used as background color of the secondary buttons

Optional
secondaryTextColor String String

Text color for the secondary buttons of your widget.

Optional
buttonRadius String String

Border radius of all the buttons except the like and mute buttons.

Optional
header whisbi.GeneralHeaderStylesConfig whisbi.GeneralHeaderStylesConfig

Shared Header styles between the One to One and the One to Many widget

Optional
floatingButton whisbi.GeneralFloatingButtonStylesConfig whisbi.GeneralFloatingButtonStylesConfig

Shared floating button styles between the One to One and the One to Many widget

Optional
titles whisbi.GeneralTitleStylesConfig whisbi.GeneralTitleStylesConfig

Shared titles styles between the One to One and the One to Many widget

Optional

Header styles

This header styles apply to both One-to-One and One-to-Many widget.

Properties:
Name Description Required
fontFamily String String

Font family for the header of your widget

Optional
fontSize String String

Font size for the header of your widget

Optional
fontWeight String String

Font weight for the header of your widget

Optional
backgroundColor String String

Background color for the header of your widget. It must be a light color, as the header text color is dark grey.

Optional
textTransform String String

Capitalization for the text of the header. It uses the same format as the CSS property text-transform

Optional
textColor String String

Text color for the header of your widget

Optional

Floating Button styles

This styles apply to both One-to-One and One-to-Many floating button.

Properties:
Name Description Required
borderColor String String

Color of to the outer circle of the agent picture on the floating button. It can be set as a solid color or a gradient.

Optional
collapseType String String

It determines where the customer has to click to collapse the conversation bubble: 'icon' to do so from an X icon, or 'button' to do it from a customizable button that appears inside the conversation bubble.

Optional
Default: 'button'
onDesktop whisbi.generalFloatingButtonPosition whisbi.generalFloatingButtonPosition

Position properties of the floating button on desktop.

Optional
onMobile whisbi.generalFloatingButtonPosition whisbi.generalFloatingButtonPosition

Position properties of the floating button on mobile.

Optional

Floating Button position

Position of the floating button based on device type (desktop or mobile).

Properties:
Name Description Required
marginY String String

Bottom margin of the floating button from the browser's edge.

Optional
Default: 12px
marginX String String

Right margin of the floating button from the browser's edge (left margin if the direction is set to “rtl”).

Optional
Default: 12px

Titles styles

This titles styles apply to both One-to-One and One-to-Many widget.

Properties:
Name Description Required
fontFamily String String

Font family for the titles of your widget

Optional
fontSize String String

Font size for the titles of your widget

Optional
fontWeight String String

Font weight for the titles of your widget

Optional

Floating Button

The shared Floating Button configuration. You can learn more about the floating button here

Text config

a) Example of the default floating button texts

Default

b) Example of the floating button texts for more than 3 impressions

Returning

Note
The recommended number of characters are set for the default font. Depending on the font you have chosen for your widget, the number of character that fits well may vary.

Properties:
Name Description Required
default whisbi.FloatingButtonTexts whisbi.FloatingButtonTexts

These are the text that will appear the first time the floating button shows up.

Optional
returning whisbi.FloatingButtonTexts whisbi.FloatingButtonTexts

These are the texts that will appear on the button if the user is seeing it after more than 3 times. If empty, the default texts will be displayed.

Optional

Texts

Properties:
Name Description Required
body String String

The main text appearing on the button. The recommended size for this text is 75 characters.

Optional
yesCTA String String

An accepting text. It leads the user to use Whisbi. We recommend 25 characters maximum for yesCTA and noCTA combined.

Optional
noCTA String String

A declining text. It leads to hiding the floating button. We recommend 25 characters maximum for yesCTA and noCTA combined.

Optional

One-to-Many

These are all the specific customization options for One-to-Many. This will only apply if your Primary seed belongs to a One-to-Many service. You can learn more about the One-to-Many here

Properties:
Name Description Required
visibilityType Integer Integer

It determines when the floating button is shown. 0 to never show the floating button, 1 to show the button when there is a One to Many session running. Keep in mind that the floating button should only be hidden if the autoOpen property is set to true or if you are using your own button to launch the Whisbi widget.

Optional
Default: 1
oneToOneDisplay Boolean Boolean

true to make the One-to-One floating button appear when the One-to-Many is not live. This only applies when the One-to-One is configured as a secondary seed.

Optional
Default: false
autoOpen whisbi.otmAutoOpenConfig whisbi.otmAutoOpenConfig

An object containing the behavior properties of the One-to-One widget when the page loads.

Optional
disableLike Boolean Boolean

If set to true, it won't be possible to rate the agent, neither through the like button nor the rating screen that can be accessed through the top agent avatar. Moreover, the mute button changes its appearance and position in order to follow the design guidelines.

Optional
Default: false
chatbot whisbi.OneToManyChatbotConfig whisbi.OneToManyChatbotConfig

The configuration of the One-to-Many chatbot. You can learn more about the Chatbot here.

Optional
texts whisbi.OneToManyTextsConfig whisbi.OneToManyTextsConfig

The customizable texts of the One-to-Many Widget

Optional
styles whisbi.OneToManyStylesConfig whisbi.OneToManyStylesConfig

The styling options for the One-to-Many Widget

Optional
Example
var conf = {
  version: '1.18.0',
  api: {...},
  general: {...},
  oneToMany: {
    visibilityType: 1,
    oneToOneDisplay: false,
    autoOpen: {
      onDesktop: {
        enabled: false,
        closeable: true,
      },
      onMobile: {
        enabled: false,
        closeable: true,
      }
    }
    disableLike: false,
    chatbot: {
      minimumTime: 10,
      minimumChats: 0,
      externalURL: 'https://www.mycompany.com/',
      pictureURL: '',
      closeOnClick: true
    },
    texts: {
      header: 'LIVE VIDEO CHAT',
      liveHelpRibbon: '',
      videoOverlay: '20%',
      floatingButton: {
        default: {
          body: 'Do you have questions? Ask me now and get answers within few seconds!',
          yesCTA: 'Yes',
          noCTA: 'Not now'
        },
        returning: {
          body: 'Can\'t find what you need? Ask me your questions now, I\'m here to help!',
          yesCTA: 'Ask now',
          noCTA: 'Maybe later'
        }
      },
      chatbot: {
        firstMessage: {
          body: '',
          bodyNoName: '',
          yesCTA: '',
          noCTA: ''
        },
        secondMessage: {
          body: '',
          bodyNoName: '',
          yesCTA: ''
        }
      }
    },
    styles: {
      body: {
         backgroundColor: ''
      },
      floatingButton: {
        blinkLabel: {
          backgroundColor: '',
          textColor: '',
        }
      },
      liveHelpRibbon: {
        backgroundColor: '',
        textColor: '',
      }
    }
  },
  oneToOne: {...},
  events: {...}
};
whisbi.setup(conf);

AutoOpen

An object containing the behavior properties of the One-to-Many widget when the page loads.

Properties:
Name Description Required
onDesktop whisbi.otmDeviceAutoOpenConfig whisbi.otmDeviceAutoOpenConfig

An object containing the behavior properties of the widget when the page loads on desktop.

Optional
onMobile whisbi.otmDeviceAutoOpenConfig whisbi.otmDeviceAutoOpenConfig

An object containing the behavior properties of the widget when the page loads on mobile.

Optional

AutoOpen config

An object containing the behavior properties of the widget when the page loads on a device class (desktop or mobile).

Properties:
Name Description Required
enabled Boolean Boolean

True to make the widget open automatically when the page loads.

Optional
closeable Boolean Boolean

If set to false, the widget will not have the "X" icon to close. Only applies if autoOpen=true . Only recommended if the widget is located on a dedicated landing.

Optional
Default: true

Chatbot

The chatbot appears during a One-to-Many session to help send your customers where you want (one-to-one session, purchase page, form…).

There are two main options for the chatbot: send the customer to a One-to-One session (secondarySeed), or send them to any url you want (externalURL). Note that the SecondarySeed has preference over the external URL.
The chatbot will appear once the minimumTime has passed, and once the customer has asked the minimum number of questions required.

You can learn more about the Chatbot here.

Default

Properties:
Name Description Required
minimumTime Integer Integer

Time in seconds before the chatbot appears. This setting is combined with minimumChats.

Optional
Default: 10
minimumChats Integer Integer

Minimum questions required to show the chatbot. This setting is combined with minimumTime.

Optional
Default: 0
externalURL String String

A URL to send the user to when clicking the "yes" CTA. Does not apply if using a secondarySeed

Optional
pictureURL String String

The URL of an image to display as the chatbot avatar. Only applies if using externalURL

Optional
closeOnClick Boolean Boolean

Set to false to keep the One-to-Many widget opened when a user clicks the chatbot link. Otherwise it will close. Only applies if using externalURL

Optional
Default: true

Texts

The texts specific to the One-to-Many widget

Header Text

Note
The recommended number of characters are set for the default font. Depending on the font you have chosen for your widget, the number of character that fits well may vary.

Properties:
Name Description Required
header String String

The broadcast title. The recommended size for this text is 18 characters.

Optional
liveHelpRibbon String String

The text of the label placed above the agent's image on the floating button. The recommended size for this text is 15 characters.

Optional
floatingButton whisbi.FloatingButtonTextsConfig whisbi.FloatingButtonTextsConfig

An object containing the texts showing up in the floating button

Optional
chatbot whisbi.OneToManyChatbotTextsConfig whisbi.OneToManyChatbotTextsConfig

An object containing the texts showing up in the floating button

Optional

Chatbot texts

The texts specific to the One-to-Many chatbot.

Properties:
Name Description Required
firstMessage whisbi.ChatbotFirstMessageConfig whisbi.ChatbotFirstMessageConfig

These are the texts that will appear on the first message of the chatbot

Optional
secondMessage whisbi.ChatbotSecondMessageConfig whisbi.ChatbotSecondMessageConfig

These are the texts that will appear on the second message of the chatbot

Optional

Chatbot: First message

These are the texts that will appear on the first message of the chatbot

Properties:
Name Description Required
body String String

The main text appearing on the message. This is a personalized message so the {{userName}} tag shall be included on it.

Optional
bodyNoName String String

The main text appearing on the message. This is the alternative version for the anonymous users, without the {{userName}} tag.

Optional
yesCTA String String

An accepting text. It leads the user to the secondarySeed (preferent) or the URL defined on externalURL.

Optional
noCTA String String

A declining text. It leads to showing the secondMessage.

Optional

Chatbot: Second message

These are the texts that will appear on the second message of the chatbot

Properties:
Name Description Required
body String String

The main text appearing on the message. This is a personalized message so the {{userName}} tag must be included on it.

Optional
bodyNoName String String

The main text appearing on the message. This is the alternative version for the anonymous users, without the {{userName}} tag.

Optional
yesCTA String String

An accepting text. It leads the user to the secondarySeed (preferent) or the URL defined on externalURL.

Optional

Styles

The styles specific to the One-to-Many widget

Properties:
Name Description Required
floatingButton whisbi.OneToManyFloatingButtonStylesConfig whisbi.OneToManyFloatingButtonStylesConfig

An object containing the styles of the floating button

Optional
body whisbi.OneToManyBodyStylesConfig whisbi.OneToManyBodyStylesConfig

The styles of the OTM body of the templates

Optional
liveHelpRibbon whisbi.OneToManyLiveHelpRibbonStylesConfig whisbi.OneToManyLiveHelpRibbonStylesConfig

The styles of the label placed over the floating button.

Optional
videoOverlay String String

The percentage of opacity of the video overlay. This overlay serves as a background for the questions made by the customer, so they can be read comfortably. Depending on the lightning and the main colors present on your studio, this overlay may need to be more or less darkened. The values recommended are between 0% and 20%.

Optional
Default: 20%

Body styles

The styles specific to the One-to-Many broadcast widget

Properties:
Name Description Required
backgroundColor String String

Background color of the One-to-Many widget. This background is always visible except when the broadcast is being displayed. It uses the same format as the CSS property background-color

Optional

Floating Button styles

The styles specific to the One-to-Many floating button

Properties:
Name Description Required
floatingButton.blinkLabel whisbi.BlinkLabelStyles whisbi.BlinkLabelStyles

The styles of the overlapped layer the appears over the agent image on the floating button

Optional

Blink Label styles

Properties:
Name Description Required
backgroundColor String String

Background color of the layer that appears overlapped to the agent image on the floating button

Optional
textColor String String

Color of the text that appears overlapped to the agent image on the floating button

Optional

Live Help Ribbon styles

The styles specific to the One-to-Many Live Help Ribbon

Properties:
Name Description Required
backgroundColor String String

The background color of the label

Optional
textColor String String

The text color color of the label

Optional

One-to-One

These are all the specific customization options for One-to-One. This will only apply if your Primary seed or Secondary seed belongs to a One-to-One service. You can learn more about the One-to-One here.

Properties:
Name Description Required
pin Boolean Boolean

True to show the PIN code on the bottom corner of the screen. You can learn more about the pin here.

Optional
cmb Boolean Boolean

True to enable the Call Me Back option. Keep in mind that this option requires the configuration of the Outbound Schedule. You can learn more about the Call me back here.

Optional
inbound Boolean Boolean

True to show the inbound option. You can learn more about the Inbound here.

Optional
customInboundAction Boolean Boolean

True to not open the phone's dialer when user clicks the "call now" button. If using this option, you need to use the otoInboundClicked event to trigger the action you want.

Optional
Default: false
visibilityType String String

It determines when the floating button is shown.0 to never show the floating button, 1 to always show the floating button, 2 to show the button only during your service's opening hours, 3 to show the button only when the connected agents are available. It also applies to the widget if the autoOpen property is set to true.

Optional
ratingType String String

Type of rating that will be shown to the user when the One-to-One session ends. 'nps-emoji' to show the Net Promoter Score survey with emojis, 'nps-dots' to show the Net Promoter Score survey with dots, 'service-rating' to show the survey to evaluate, from 1 to 5 stars, different aspects of the service, or 'none' if you don't want to show any. Learn more about the rating types here.

Optional
defaultUserPictures Array Array

If defaultUserPictures is set, the real images of the agents and the name won't be displayed until the session starts. Instead, a set of images will be displayed. A list of the image URLs is required.

Optional
form whisbi.OneToOneFormConfig whisbi.OneToOneFormConfig

An object containing the fields showing up in the One-to-One form. Learn more about the form here.

Optional
chatbot whisbi.OneToOneChatbotConfig whisbi.OneToOneChatbotConfig

An object containing all the chatbot related configuration.

Optional
schedule whisbi.OneToOneScheduleConfig whisbi.OneToOneScheduleConfig

An object containing the fields showing up in the One-to-One schedule form. Learn more about the schedule here.

Optional
autoOpen whisbi.otoAutoOpenConfig whisbi.otoAutoOpenConfig

An object containing the behavior properties of the One-to-One widget when the page loads.

Optional
texts whisbi.OneToOneTextsConfig whisbi.OneToOneTextsConfig

The customizable texts of the One-to-One Widget

Optional
styles whisbi.OneToOneStylesConfig whisbi.OneToOneStylesConfig

The styling options for the One-to-One Widget

Optional
Example
var conf = {
  version: '1.18.0',
  api: {...},
  general: {...},
  oneToMany: {...},
  oneToOne: {
    pin: false,
    cmb: false,
    inbound: false,
    phoneType: ''
    visibilityType: 1,
    ratingType: 'nps-emoji',
    defaultUserPictures: [],
    autoOpen: {
      onDesktop: {
        enabled: false,
        closeable: true,
      },
      onMobile: {
        enabled: false,
        closeable: true,
      }
    },
    texts: {
      header: '',
      formTitle: '',
      liveHelpRibbon: '',
      floatingButton: {
        default: {
          body: 'Do you have questions? Ask me now and get answers within few seconds!',
          yesCTA: 'Yes',
          noCTA: 'Not now'
        },
        returning: {
          body: 'Can\'t find what you need? Ask me your questions now, I\'m here to help!',
          yesCTA: 'Ask now',
          noCTA: 'Maybe later'
        }
      },
      outOfHours: {
        mainTitle: '',
        subTitle: '',
      },
      thankYou: {
        mainTitle: '',
        subTitle: '',
      }
    },
    styles: {
      body: {
         backgroundColor: ''
      },
      liveHelpRibbon: {
        backgroundColor: '',
        textColor: '',
      }
    },
    form: {
      name: {
        visible: true,
        mandatory: false,
      },
      email: {
        visible: true,
        mandatory: false,
      },
      phone: {
        visible: true,
        mandatory: false,
      },
      conversationalMode: true,
      availableCountryCodes: [],
      defaultCountryCode: '',
      preferredCountryCodes: []
    },
    chatbot: {
      configURL: '',
      outOfHoursConfigURL: ''
    },
    schedule: {
      name: {
        visible: true,
        mandatory: false,
      },
      email: {
        visible: true,
        mandatory: false,
      },
      availableHours: [
        [['10:00','17:00']], //Monday
        [['10:00','17:00']],
        [['10:00','17:00']],
        [['10:00','17:00']],
        [['10:00','17:00']],
        [], //In this case Saturdays are non-working days
        [['10:00','13:00'], ['14:00','16:00']] //Sunday
      ],
      timeInterval: 30,
      maxBookingRange: 60,
      exceptions: {
        '01-04-2017': [
          ['12:00','14:00'],
          ['16:00','18:00']
        ],
        '25-12-2017': [] //This day will be a non-working day
      },
      dateFormat: 'dd-mm-yy,
      firstDayOfWeek: 1,
      emailTo: ''
    }
  }
};
whisbi.setup(conf);

AutoOpen

An object containing the behavior properties of the One-to-One widget when the page loads.

Properties:
Name Description Required
onDesktop whisbi.otoDeviceAutoOpenConfig whisbi.otoDeviceAutoOpenConfig

An object containing the behavior properties of the widget when the page loads on desktop.

Optional
onMobile whisbi.otoDeviceAutoOpenConfig whisbi.otoDeviceAutoOpenConfig

An object containing the behavior properties of the widget when the page loads on mobile.

Optional

AutoOpen config

An object containing the behavior properties of the widget when the page loads on a device class (desktop or mobile).

Properties:
Name Description Required
enabled Boolean Boolean

True to make the widget open automatically when the page loads.

Optional
closeable Boolean Boolean

If set to false, the widget will not have the "X" icon to close. Only applies if autoOpen=true . Only recommended if the widget is located on a dedicated landing.

Optional
Default: true

Form config

An object containing the fields showing up in the One-to-One form.
You can learn more about the Chatbot here.

Properties:
Name Description Required
name whisbi.OneToOneInputConfig whisbi.OneToOneInputConfig

Object containing the properties for the Name field on the One-to-One form

Optional
email whisbi.OneToOneInputConfig whisbi.OneToOneInputConfig

Object containing the properties for the Email field on the One-to-One form

Optional
phone whisbi.OneToOneInputConfig whisbi.OneToOneInputConfig

Object containing the properties for the Phone field on the One-to-One form

Optional
extra whisbi.OneToOneExtraInputConfig whisbi.OneToOneExtraInputConfig

Object containing the properties for the Extra field on the One-to-One form

Optional
conversationalMode Boolean Boolean

If set to true, the widget will ask for the customer's phone in a conversational style. Only applies if oneToOne.form.phone.visible=true and all the other inputs are set to false.

Optional
Default: false
availableCountryCodes Array Array

The available country codes for the phone field.

Optional
defaultCountryCode String String

The country code that appears by default on the phone field.

Optional
preferredCountryCodes Array Array

The country codes that will appear on the first place on the country codes list.

Optional

Chatbot config

An object containing all the chatbot configuration parameters. You can find documentation about the configuration options:

Properties:
Name Description Required
configUrl String String

URL of the configuration file to load during service hours.

Optional
outOfHoursConfigURL String String

URL of the configuration file to load when the service is out of hours.

Optional

Schedule config

An object containing the fields showing up in the One-to-One schedule form
You can learn more about the Agenda here.

Properties:
Name Description Required
name whisbi.OneToOneInputConfig whisbi.OneToOneInputConfig

Object containing the properties for the Name field on the One-to-One schedule form. It does not apply to the chatbot.

Optional
email whisbi.OneToOneInputConfig whisbi.OneToOneInputConfig

Object containing the properties for the Email field on the One-to-One schedule form. It does not apply to the chatbot.

Optional
extra whisbi.OneToOneExtraInputConfig whisbi.OneToOneExtraInputConfig

Object containing the properties for the Extra field on the One-to-One form. It does not apply to the chatbot.

Optional
availableHours Array Array

Time ranges when a session can be scheduled. Different ranges of times can be set for each day, taking into account that the week starts on monday.

Optional
timeInterval Integer Integer

Length in minutes of the time slots available to schedule a session

Optional
maxBookingRange Integer Integer

Maximum days in advance with which you can schedule a session. This determines the maximum number of days ahead available in the calendar.

Optional
exceptions Object Object

Days with a different schedule or without service.

Optional
dateFormat String String

Date format: 'dd-mm-yy' or 'mm-dd-yy'.

Optional
emailTo String String

List of emails separated by commas, where the scheduled leads info will be sent to.

Optional
firstDayOfWeek Integer Integer

First day of the week. 0 - Sunday, 1 - Monday, 2 - Tuesday, 3 - Wednesday, 4 - Thursday, 5 - Friday, 6 - Saturday.

Optional
Default: 1

Inputs config

Object containing the properties for an input field on a One-to-One form

Properties:
Name Description Required
visible Boolean Boolean

It determines if the field must be shown.

Optional
mandatory Boolean Boolean

It determines if the field is mandatory or optional. If visible is set to false, mandatory must be set to false also.

Optional

Extra input config

Object containing the properties for the extra (custom) field on a One-to-One form

Properties:
Name Description Required
visible Boolean Boolean

It determines if the field must be shown.

Optional
mandatory Boolean Boolean

It determines if the field is mandatory or optional. If visible is set to false, mandatory must be set to false also.

Optional
placeholder String String

The placeholder text to be displayed in the extra field

Optional
options Array Array

An array of options to be selected in the custom field. If provided, the field will be a <select> instead of a free text input
Example: [{value: 'value_1', label: 'my option 1'}, {value: 'value_2', label: 'my second option'}]

Optional

Texts

The texts specific to the One-to-One widget

Note
The recommended number of characters are set for the default font. Depending on the font you have chosen for your widget, the number of character that fits well may vary.

Properties:
Name Description Required
header String String

The broadcast title. The recommended size for this text is 18 characters.

Optional
formTitle String String

The One-to-One form title.

Optional
liveHelpRibbon String String

The text of the label placed above the agent's image on the floating button. The recommended size for this text is 15 characters.

Optional
floatingButton whisbi.FloatingButtonTextsConfig whisbi.FloatingButtonTextsConfig

An object containing the texts showing up in the floating button

Optional
outOfHours whisbi.OneToOneTemplateTextsConfig whisbi.OneToOneTemplateTextsConfig

These are the texts that will appear on the "Out of hours" screen. This screen appears when the user is trying to start a session out of the service hours. We recommend to use the subtitle on this screen to explain the service schedule.

Optional
thankYou whisbi.OneToOneTemplateTextsConfig whisbi.OneToOneTemplateTextsConfig

These are the texts that will appear on the "Thank You" screen, that show up at the end of a session.

Optional

Template texts

Properties:
Name Description Required
mainTitle String String

Big main title.

Optional
subTitle String String

Brief text that appears below the main title.

Optional

Styles

The styles specific to the One-to-One widget

Properties:
Name Description Required
body whisbi.OneToOneBodyStylesConfig whisbi.OneToOneBodyStylesConfig

The styles of the OTO body of the templates

Optional
liveHelpRibbon whisbi.OneToOneLiveHelpRibbonStylesConfig whisbi.OneToOneLiveHelpRibbonStylesConfig

The styles of the label placed above the agent's image on the floating button.

Optional

Body styles

The styles of the One-to-One templates

Properties:
Name Description Required
backgroundColor String String

Background color of the One-to-One widget. This background is always visible except when the videowalk or some media is being shared during a One-to-One session. It uses the same format as the CSS property background-color.

Optional
backgroundImage whisbi.BackgroundImageConfig whisbi.BackgroundImageConfig

Background image of the One-to-One widget. Applies in the same cases as backgroundColor.

Optional

Background image

A background image configuration

Properties:
Name Description Required
url String String

The URL of the background image

Mandatory
repeat String String

The value of the CSS background-repeat property for the background image.

Optional
Default: repeat
size String String

The value of the CSS background-size property for the background image.

Optional
Default: auto
position String String

The value of the CSS background-position property for the background image.

Optional
Default: center

Live Help Ribbon styles

The styles of the label placed above the agent's image on the floating button.

Properties:
Name Description Required
backgroundColor String String

The background color of the label

Optional
textColor String String

The text color color of the label

Optional

Events

These are all the events of the Whisbi widgets. Use them to bind listeners to specific events in the Whisbi experience, in order to trigger actions in your part when they occur.

Example
var conf = {
  version: '1.18.0',
  api: {...},
  general: {...},
  oneToMany: {...},
  oneToOne: {...},
  events: {
    widgetLoaded: widgetLoaded,
    otoCmbRequested: otoCmbRequested
  }
};
whisbi.setup(conf);

function widgetLoaded() {
  console.log('Widget loaded');
}

function otoCmbRequested(data) {
  console.log('Lead:', data.lead);
}

General

Events that trigger both in One-to-Many and One-to-One

Properties:
Name Description Required
widgetLoaded function function

The Whisbi widget script was loaded properly

Location: Widget loaded
Triggered: Every time a landing is loaded or reloaded regardless of whether the floating button is visible or not or if the landing is set to auto open.

Returns: cookieGuid

Optional
floatingButtonShown function function

The floating button appears on the client’s landing

Location: Whisbi floating button
Triggered: Every time the floating button is shown even after the sidebar has been closed.

Optional
floatingButtonUnfolded function function

The floating button unfolds, showing the speech bubble

Location: Whisbi floating button
Triggered: Every time a landing is loaded or reloaded and the speech bubble is shown.

Optional
floatingButtonFolded function function

The floating button folds, hiding the speech bubble

Location: Whisbi floating button
Triggered: Every time a landing is loaded or reloaded and the speech bubble is hidden.

Optional

One-to-Many: Start

Events that trigger before the customer has entered on a One-to-Many session

Properties:
Name Description Required
otmBroadcastStarted function function

A new One-to-Many broadcast starts, or the customer enters a website where a broadcast is currently live.

Location: Widget loaded
Triggered: Every time a landing is loaded or reloaded regardless of whether the widget is opened or not.

Optional
otmOpened function function

The One-to-Many sidebar opens

Location: Whisbi floating button
Triggered: Every time the One-to-Many sidebar opens regardless from a click on the floating button, an auto open setting or a custom button.
Exceptions: If a customer is already in a session and reloads the landing, this event won't be triggered again.

Optional

One-to-Many: Session

Events that trigger when the customer is inside a One-to-Many session

Properties:
Name Description Required
otmNameEntered function function

The customer enters their name and proceeds to the broadcast

Location: One-to-Many session. Name screen

Optional
otmSessionInit function function

A One-to-Many session is live and the customer joins the session

Location: One-to-Many session
Triggered: The first time a customer sees the live broadcast just after the name screen.

Optional
otmSessionStarted function function

The live broadcast starts to be displayed on the One-to-Many open sidebar

Location: One-to-Many session
Triggered: On Desktop the first time a customer sees the live broadcast just after the name screen. On Mobile the first time a customer manually plays the live broadcast just after the name screen.

Optional
otmMessageSent function function

The viewer sends a question to the One-to-Many presenter

Location: One-to-Many session

Optional
otmLiked function function

The viewer clicks the like button on the One-to-Many widget

Location: One-to-Many session

Optional
otmMuted function function

The viewer mutes the One-to-Many broadcast

Location: One-to-Many session

Optional
otmUnmuted function function

The viewer unmutes the One-to-Many broadcast

Location: One-to-Many session

Optional
otmChatbotShown function function

The One-to-Many chatbot just appears

Location: One-to-Many session
Triggered: Once per session.

Optional
otmChatbotClicked function function

As a response to the One-to-Many chatbot, the viewer has clicked on the button that leads to the One-to-One or the designed URL

Location: One-to-Many session
Triggered: Every time a customer clicks on this button.

Optional

One-to-Many: End

Events that trigger when a One-to-Many session has finished

Properties:
Name Description Required
otmBroadcastEnded function function

A One-to-Many broadcast ends

Location: One-to-Many end session
Triggered: Once a One-to-Many broadcast ends, regardless of whether the widget is opened or not.

Optional
otmClosed function function

The One-to-Many sidebar has been closed

Location: Sidebar

Optional

One-to-One: Start

Events that trigger before the customer has entered on a One-to-One session

Properties:
Name Description Required
otoOpened function function

The One-to-One sidebar opens

Location: Whisbi floatting button
Triggered: Every time the One-to-One sidebar opens regardless from a click on the floating button, an auto open setting or a custom button.
Exceptions: If a customer is already in a session and reloads the landing, this event won't be triggered again.

Optional
otoSessionRequested function function

The customer has requested a call me now session

Location: Call me now request
Triggered: Just before showing the hold screen to be attended.
Exeptions: If a smart landing is displayed, this event is not triggered. If a customer clicks on the "Continue on hold" button from the smart landing it is not sent until an agent is available. If we reload the landing while we are waiting, it won't be triggered again.

Returns: lead, name, phone, email, extra

Optional
otoInboundClicked function function

The customer has clicked the mobile inbound option

Location: Inbound screen or inbound chatbot node on mobile
Triggered: It is triggered just before the mobile dial pad is opened or in case of having GDPR, it will be triggered after it is accepted.

Returns: phone

Optional
otoInboundToWhisbiLoaded function function

The customer sees the Inbound number on desktop

Location: Inbound screen or inbound chatbot node on desktop

Returns: formatted_phone, phone

Optional
otoCallBooked function function

The customer just booked a One-to-One call for an specific date and time

Location: Agenda
Triggered: A schedule call has been booked successfully.

Returns: country, extra, name, phone, scheduledDate, scheduledDateObj

Optional
otoCmbRequested function function

The customer has requested a One-to-One Call Me Back

Location: Call me back request

Returns: lead, name, phone, email, extra

Optional
otoPinCodeGenerated function function

The Pin to Whisbi code has been generated

Triggered: Widget generates an alpha numeric pin in the landing regardless of whether it is shown or not. Also shown within the Tap to Call and Transfer Call screens. When a customer ends a session the PIN is refreshed and the event is triggered again.

Returns: pinCode

Optional

One-to-One: Session

Events that trigger when the customer is inside a One-to-One session

Properties:
Name Description Required
otoSessionStarted function function

A One-to-One session has started, so the customer and the agent can communicate with each other

Location: One-to-One Session
Triggered: When both agent and customer are in the room

Optional
otoMessageSent function function

The customer sends a message to the agent through the One-to-One chat.

Location: One-to-One session

Optional
otoCallTransferred function function

The call has been transferred to another agent so the customer reaches the transfer call screen

Location: One-to-One Session
Triggered: Agent A transfers a call to agent B

Optional

One-to-One: End

Events that trigger when a One-to-One session has finished

Properties:
Name Description Required
otoSessionEnded function function

The One-to-One session has ended, so the communication between the customer and the agent finishes

Location: One-to-One Session End
Exeptions: A transferred call doesn't trigger this event.

Returns: leadGuid

Optional
otoSurveyShown function function

The One-to-One survey appears

Location: Survey

Returns: leadGuid

Optional
CloseSubmittedFeedback function function

The customer has closed the widget after sending the survey

Location: Survey
Triggered: The customer submits the survey and then clicks on the "Close" button

Optional
otoClosed function function

The One-to-One sidebar was just closed

Location: Sidebar
Triggered: The customer closes the One-to-One sidebar by clicking on the close icon located at the header

Optional