There are multiple configuration options that can control how our version 2 messenger behaves.
The messenger can be configured with options as follows:
const servisBotConfig = {
organization: 'servisbot',
endpoint: 'servisbot-botty',
sbRegion: 'eu-1',
context: {},
// Additional options go here. See the link below for a full list of parameters.
};
let sbMessenger = ServisBot.init(servisBotConfig); // Loads and displays the messenger on the page
See the full list of messenger init params for detailed information for setting up the messenger with advanced features.
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
let sbMessenger;
sbMessenger = ServisBot.init({
...configurationOptions,
context: {
original: "context"
}
});
// During the conversation, you can update the context as seen below:
function updateCustomerName() { // For example, this function could be assigned to a button click event on your page
sbMessenger.rewriteContext({
customerName: 'John Doe' // Updated 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 methods in the Messenger API (rewriteContext, unload, etc.) are going to be used, it is better to save the output of ServisBot.init() to a variable for future manipulation, as shown above with sbMessenger.
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
sbMessenger.unload();
// Passing the endpointname as an argument unloads the specific messenger mounted on the page
sbMessenger.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
sbMessenger.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;
}