V2 Configuration

There are multiple configuration options that can control how our version 2 messenger behaves.

ServisBOT Messenger Configuration Options

container: This enables you to take over an entire div with the messenger. Just supply the id of the div you want filled.

   container: ‘#container’

organization: the organizational code this bot is related to, i.e. flowit

dir: This option determines the direction of text in the messenger. The options are ltr and rtl. The default option is ltr.

displayLightbox: Determines whether the messenger displays as a rondel and in a lightbox mode when enabled.

displayWidget: This option determines whether or not the ServisBOT widget is displayed. The ServisBOT widget is displayed on the bottom right hand corner of your web page, and toggles the view of the ServisBOT web messenger. This field is optional.

displayHeader: This option determines whether or not the header is displayed. This field is optional. If not specified by the user it will be displayed by default.

displayRoundel: This option determines whether or not the roundel is displayed. This field is optional. If not specified by the user it will be displayed by default.

alwaysOpen: This field specifies whether the ServisBOT web messenger is permanently displayed or not. This field is optional.

context: extra information to send into the bot.

userToken: value used to verify user is within a secureSession.

expiredEvent: This field specifies a callback to alert parent app with secureSession failures.

googleApiKey: This field is for the Google API key to be used to display maps in the messenger

customStyle: This field takes in custom CSS either linked from a CDN or an internal file path to overwrite the styling of messenger elements (described below).

Updating the context

A rewriteContext method is available if you wish to replace the content that was passed to the embeddable messenger at init time:

//  Original Init context call
ServisBot.init({
  ...configuration options,
  context: {
    original: "context"
  }
});
//  Update the context during a conversation
ServisBot.rewriteContext({
  updated: "context",
});

Populating Messenger with a message

With version 2 of our messenger, it’s possible to populate message queries into your messenger. First, make sure you have installed our messenger as described, then call the function below.

window.lightningLauncher.setMessage("Hello");

You can also then send that message on behalf of the users at anytime

window.lightningLauncher.submitMessage();

Sending a message through messenger

With version 2 of our messenger. It is possible to send messages on behalf of the user with one function. First, make sure you have installed our messenger as described, then call the function below.

window.lightningLauncher.sendMessage("Hello New");

Applying custom styles

Messenger can be feed custom CSS to overwrite default styles of the TimeLine elements or the messenger container itself. CSS can be served from either a CDN or an external style sheet by passing the CDN link or file path as a string to the messenger configuration prop customStyle. Styling global tags like <p> HTML body works the same as the standard CSS styling. To overwrite other messenger elements, their respective classes must be overwritten with preferred styles with an !important attribute. This ensures the custom styles take precedence over the default messenger styling. Below is an example of a few such styles.

* {
	font-family: monospace; /*  Sets monospace as the global font for the messenger */
}
.sb-conversation {
	background: rebeccapurple !important;  /*  Sets the background color for the messenger */
}
.sb-timeline-paper.sb-timeline-paper-button {
    border-left: 10px solid rgb(216, 87, 11) !important;   /*  Sets custom borders for ButtonPrompt TimeLine element */
    border-right: 10px solid rgb(216, 87, 11) !important;
}
section {
    border-right: 0px !important /*  Sets custom borders for the section tag */
}