Installing the Omnichannel Widget

The Omnichannel Widget enables you to communicate with your teams on your homepage, in your app, on live chat or any messaging service — WhatsApp, Messenger, WeChat, SMS, and more.

In this guide, you'll learn how to install the Omnichannel Widget on your website.

Step 1

First things first, install Live Chat as an Inbox Channel and configure the Omnichannel Widget to make it your own.

Step 2

Once you’re happy with your custom Omnichannel Widget configuration, it’s time to install the Omnichannel Widget code snippet on your website.

Step 3

To collect your unique Javascript code snippet, click Add widget to your website on the top-right of your screen above the widget preview.

Install Omnichannel Widget

Step 4

Your unique Javascript code snippet will then be displayed in a modal. We’ve prepopulated all your configurations and workspace data so all you need to do is copy-to-clipboard and embed this in your website code.

Install Omnichannel Widget

Step 5

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>

Here’s how to embed the Javascript code snippet on your website: 1. Copy the full Javascript code snippet

  1. Go to the <body> section of your website

  2. Paste the full Javascript code snippet as the last line before the closing </body> tag.

  3. Repeat the process on each page you want the widget to show up.

  4. Deploy your changes and tada! 🎉 The Omnichannel Widget is now live on your website.

Step 6

You can now toggle between active and inactive on the top of your Omnichannel Widget configuration page to either display (active) or hide (inactive) the widget.

Install Omnichannel Widget

And that’s it! 🎉 Now you know how to install the Omnichannel Widget on your website.

Install Omnichannel WidgetInstall Omnichannel Widget
Next upVisibility

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