Messenger Configuration Options

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

ServisBOT Messenger Configuration Options

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.
};
ServisBot.init(servisBotConfig);

See the full list of messenger init params for detailed information for setting up the messenger with advanced features.

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({
  ...configurationOptions,
  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",
});

Unloading the messenger

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

Clear the messenger

A clear method is available if you wish to clear Messengers state / storage and begin a new conversation without a page refresh

ServisBOT.clear()

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.

Displaying different roundel styles on Mobile and Desktop views

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;
}

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;
}