Web Messenger Installation
Getting ServisBOT messenger installed on a website is as simple as adding our install script to your site template.
Tip
The code snippet must be inserted before the main closing body tag ie. </body>. You must also include the code snippet in all pages that require the ServisBot web messenger
Embedding messenger on your site
Add the following script to any web page within your web application which you would like to include the ServisBOT web messenger.
<script src="CDN for bundle-messenger.js"></script>
<script>
let sbMessenger = null; // Variable to store the initialized messenger
function initializeMessenger() {
// Init Messenger with your desired configuration
const sbConfig = {
organization: 'Your Organization',
endpoint: 'Endpoint Address',
sbRegion: "Your Region",
version: "2",
}
sbMessenger = ServisBot.init(sbConfig);
}
// Initialize the messenger when your host page finishes loading content
window.addEventListener('load', (event) => {
initializeMessenger();
});
// Later in your code you use the returned value from ServisBot.init (sbMessenger in this case) to interact with the messenger
sbMessenger.rewriteContext({ some: 'context' });
</script>Your src for bundle-messenger.js script tag might change based on your region.
- For SBRegion
eu-1: Use//lightning.production.helium.servismatrixcdn.com/v2/latest/bundle-messenger.js" - For SBRegion
us1: Use//lightning.us1.helium.servismatrixcdn.com/v2/latest/bundle-messenger.js
Note
Replace ‘yourOrganization’ with the name in which you registered with ServisBOT. Replace ‘yourEndpointAddress’ with the specific endpoint alias.
Troubleshooting
My bot doesn’t load at all with the script on the page
- Double check that your endpoint has your current domain whitelisted
- In rare cases your site or page might not work with the src path
//you may need to explicitly reference the src withhttps://
Note
If your bot on mobile is not taking up the full height and width of the page as desired, please make sure the host page has viewport meta initial scale set to 1 (shown below)
<meta name="viewport" content="width=device-width, initial-scale=1.0">