There are multiple configuration options that can control how our version 2 messenger behaves.
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.
messengerPosition: This field determines whether to display Messenger on the left or right side of the host page. The default is right.
placeholderText: This field determines the placeholder text in the messenger.
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"
}
});
ServisBot is not always the variable needed when accessing the API. Some website installations require ServisBOT be initiated as a global page variable. And often if the ServisBOT API is going to be used, it is better to save the output of ServisBot.init() to a varialbe for future manupulation.
// Update the context during a conversation
ServisBOT.rewriteContext({
updated: "context",
});
An unload method is available if you wish to remove/unmount the messenger from the website or mount other messenger on the page:
// Unloads the messenger mounted on the page
ServisBOT.unload()
// Passing the endpointname as an argument unloads the specific messenger mounted on the page
ServisBOT.unload('some-endpoint-name')
A clear method is available if you wish to clear Messengers state / storage and begin a new conversation without a page refresh
ServisBOT.clear()
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.
Different roundel styles can be displayed on desktop and mobile devices by targeting the right classes. Below are the target classes and their behaviours.
| Target Class | Behaviour | |||
|---|---|---|---|---|
| .sb-roundel | Target this class to show a custom roundel on all views (Desktop and Mobile) | |||
| .sb-roundel-desktop | Target this class to show a custom roundel only on only Desktop views | |||
| .sb-roundel-mobile | Target this class to show a custom roundel only on Mobile views |
Displays different Roundel styles on Desktop and Mobile views
.sb-roundel-mobile {
width: 53px;
border-radius: 2px;
}
.sb-roundel-mobile:after {
align-items: center;
font-size: 9px;
font-family: Sailec, Arial;
font-weight: 600;
margin-left: 5px;
margin-top: 1px;
}
.sb-roundel-desktop {
border-radius: 30px; /* Sets the width, position and shape of the roundel */
right: 26vh;
width: 200px !important;
}
.sb-roundel-desktop: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;
}
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;
}
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;
}