API Reference

OverviewSMSSMS batch APIVoice CallingVoice MessagingConversations APIContacts API (v2)Integrations APIFile Storage APIOmnichannel WidgetNumbersPartner AccountsVerifyMMSHLRBalanceLookupContactsGroupsIntentFAQNamed Entity RecognitionLanguage Detection

Omnichannel Widget Javascript API

MessageBird’s Omnichannel Widget Javascript API allows you to customize the design, behaviour, and visibility of the Omnichannel Widget displayed on your website.

You can configure parts of the Omnichannel Widget directly in your Omnichannel Widget Settings in Inbox.

Getting started

The Omnichannel Widget Javascript API can be accessed through:

window.MessageBirdChatWidget

To initialize the Omnichannel Widget , you need to first embed your unique Omnichannel Widget installation snippet in either the header of your website (for all pages) or on the header of each page you wish to display the Omnichannel Widget.

You can find your installation snippet in your Omnichannel Widget Settings in Inbox.

Here is an example of the installation snippet:

<script>
var MessageBirdChatWidgetSettings = {
widgetId: 'YOUR-WIDGET-ID',
initializeOnLoad: true,
};
!function(){"use strict";if(Boolean(document.getElementById("live-chat-widget-script")))console.error("MessageBirdChatWidget: Snippet loaded twice on page");else{var e,t;window.MessageBirdChatWidget={},window.MessageBirdChatWidget.queue=[];for(var i=["init","setConfig","toggleChat","identify","hide","on","shutdown"],n=function(){var e=i[d];window.MessageBirdChatWidget[e]=function(){for(var t=arguments.length,i=new Array(t),n=0;n<t;n++)i[n]=arguments[n];window.MessageBirdChatWidget.queue.push([[e,i]])}},d=0;d<i.length;d++)n();var a=(null===(e=window)||void 0===e||null===(t=e.MessageBirdChatWidgetSettings)||void 0===t?void 0:t.widgetId)||"",o=function(){var e,t=document.createElement("script");t.type="text/javascript",t.src="https://livechat.messagebird.com/bootstrap.js?widgetId=".concat(a),t.async=!0,t.id="live-chat-widget-script";var i=document.getElementsByTagName("script")[0];null==i||null===(e=i.parentNode)||void 0===e||e.insertBefore(t,i)};"complete"===document.readyState?o():window.attachEvent?window.attachEvent("onload",o):window.addEventListener("load",o,!1)}}();
</script>

Browser Support

We want to make sure the livechat widget is available to as many end users as possible. However, in order to focus on making the widget the best experience for all consumers. We need to cut off support for certain browsers.

We use the can I use usage table combined with our own anonymised metrics to have set our support levels.

If you have a large set of customers who fall outside of the specified support versions, please reach out and we will see what we can do to accomicate you.

For Desktop browsers we support the following and later:

  • Edge: 80+
  • Firefox: 67+
  • Chrome: 63+
  • Safari: 10.1+
  • Opera: 37+

Please note that we do not support Internet Explorer

Mobile:

  • Android: latest Samsung + Chrome + Firefox Browsers
  • IOS: IOS 7+ / Safari 7+

API Reference

.init(widgetId: string): Promise

Will load and initialize the widget, you can either pass the widgetId to the init function as a param or set the widgetId to MessagebirdChatWidgetSettings.widgetId. If these are different values it will prioritize the argument passed in over the one set on the settings object. This can be called before the widget has fully loaded.

.toggleChat()

Opens/closes the widget main screen (excluding the icon)

.hide()

Hides the whole widget (including the icon). This can be called before the widget has fully loaded.

.show()

Shows the whole widget (including the icon)

.element

Returns a DOM element of the widget

.getVisitorId()

Returns a Promise containing the livechat visitor ID of the user of the widget. Please note that this can only be called once the livechat has been loaded onto the page. If its a first time user who has never interacted with the widget before it will only return a value when the user interacted / opens the widget.

.setAttributes()

Takes an object with the keys and values you would like to have on your visitors contact profile in inbox. The values must only be primitive values, ie a string, number or a boolean.

These values will only be attached to the visitor when the visitor sends a message from the livechat widget. It will also only attach the values to current visitor in the livechat.

window.MessageBirdChatWidget.setAttributes({
email: "hello@test.com",
phone: "+31 123 456 789",
premiumUser: true,
itemsInCart: 2
})

.identify(uid: string, attributes?: Record<string, string | boolean | number>): Promise

Takes an unique identifier as an argument. It will then log in the widget user with the identifier passed as an its user returning a promise and resolving when complete.

window.MessageBirdChatWidget.identify('123-456-789');

identify can also take a second argument of attributes which is the exact same as the setAttributes methods.

window.MessageBirdChatWidget.identify('123-456-789', {
email: "hello@test.com",
phone: "+31 123 456 789",
premiumUser: true,
itemsInCart: 2
})

.logout(): Promise

Logout will reset the widget, clearing all locally stored data and creates a fresh new anonymous visitor. the method will return a Promise and resolve when its complete.

This is useful if your using the identify feature and you want to make sure the user in widget is logged out when the user on your site it.

window.MessageBirdChatWidget.logout()

.shutdown(): Promise

Like logout, calling this method will reset the widget, clearing all locally stored data and creating a fresh new anonymous visitor. This method will also hide / remove the widget from the page.

window.MessageBirdChatWidget.logout()

startConversation(text: string)

startConversation will open the widget in the chat view and send a message from the visitor to the widget. This would be useful if you want to start certain flows programmatically for example via a button on your page.

window.MessageBirdChatWidget.startConversation('hello there')

setLanguage(language: string)

setLanguage will force the widget to change to the language passed in as an argument. The widget expects the languages in the ISO 639-1 Code format. It will respect the rules set up in the settings page, for example, if the language has been disabled the Widget will not update to that language.

window.MessageBirdChatWidget.setLanguage('nl')

.on(event, callback)

Pass a callback function to a set of preset events. This can be called before the widget has fully loaded.

event 'ready'

This will be called once the widget has loaded. Nothing is passed to the callback.

window.MessageBirdChatWidget.on('ready', () => {
// do something here
})
event 'visitorCreated'

This will return the visitorID of the user. If its a first time user who has never interacted with the widget before it will only return a value when the user interacted / opens the widget.

window.MessageBirdChatWidget.on('visitorCreated', (id) => {
// do something with id here
})
event 'toggle'

This will fire each time the widget is opened or closed, the callback will provide the state of the widget ie, if the widget is closed and the user clicks to open the widget the argument via the callback will be true.

window.MessageBirdChatWidget.on('toggle', (isOpen) => {
// isOpen === true -> customer opened the widget
// isOpen === false -> customer closed the widget
})
Next upNumbers

Questions?

We’re always happy to help with code or other doubts you might have! Check out our Quickstarts, API Reference, Tutorials, SDKs, or contact our Support team.

Cookie Settings