Messenger Configuration Options

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

ServisBOT Messenger Configuration Options

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

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’

context: Extra information to send into the bot.

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

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

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.

lang: When set to a Valid locale or language code, will help CMS resolve content variants for different languages.

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

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

textInputDisabled: This field disables all user input via the text input field at the bottom of Messenger. The default is false.

defaultOpen: This field determines whether to display Messenger opened by default. The default is false.

Updating the context

A rewriteContext method is available if you wish to replace the content that was passed to the embedded 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 fed custom CSS to overwrite default styles of the TimeLine elements, the messenger container itself, or the roundel. 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.

Note: Modifying the style of the roundel is only available through the “Custom Roundel” feature, please ask your ServisBOT Representative about adding this feature to your Organization.

If you want to alter the position of the messenger, or the size or position of the roundel you will also need to link to your CSS in the head of the page where you are loading the messenger e.g.

<link rel="stylesheet" type="text/css" href="/assets/custom.css" />
* {
	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 */
}

.sb-messenger-iframe {
	right: 30vw !important; /*  Sets the position of the messenger */
}

.sb-iframe-roundel {
  width: 355px !important; /*  Sets the position, height and width of the roundel container */
	height: 100px !important;
	right: 30vw !important;
}

.sb-roundel {
  border-radius: 30px; /* Sets the width, position and shape of the roundel */
  right: 26vh;
	width: 300px;
}
.sb-roundel:after {
  content: 'Chat with us'; /* Adds text to the roundel */
  align-items: center;
  font-size: 20px;
  font-family: Sailec, Arial;
  font-weight: 400;
  margin-left: 10px;
  margin-top: 1px;
}

TextMsg Custom Styling

It is also possible to style individual Timeline Elements using custom CSS classnames or element Ids.

Note Only the timeline element TextMsg is currently supported

// Styled component using classname
<TimelineMessage>
  <TextMsg CSSClassName="your-custom-classname">Sample Message</TextMsg>
</TimelineMessage>


// Styled component using element id
<TimelineMessage>
  <TextMsg CSSElementId="your-custom-element-id">Sample Message</TextMsg>
</TimelineMessage>

Note When defining your custom style, please ensure to use the !important declaration

// Sample CSS using classname
.your-custom-classname {
  background-color: red !important;
  color: black !important;
}

// Sample CSS using element id
#your-custom-element-id {
  background-color: red !important;
  color: black !important;
}