Toggling, Hiding Showing and Positioning the Widget

In this guide, you'll learn all the ways the you can trigger, hide and then show Omnichannel Widget on your website.

Hiding

If you want to completely hide the widget, you can use the .hide() method to achive this. This method can be called at any time after the Omnichannel Widget Snippet has been executed on your page.

This is useful if you only want to hide the widget on a certain page for example. Hiding the Widget completely from users before the page is interactive.

window.MessageBirdChatWidget.hide()

Showing

This method is only useful if the widget has been hidden previous. This is the opposite of the .hide() method.

window.MessageBirdChatWidget.show()

Toggling the Widget

If you want to open the Widget programmatically, you can use this method to change it from its current open or closed state.

Using the api you can toggle the widget to either open or closed depending on whether it is open or closed.

window.MessageBirdChatWidget.toggleChat()

You can also force the widget to open or close by passing true to open and false to close the widget as an argument to the method.

window.MessageBirdChatWidget.toggleChat(true)

Note that the widget will remain visible on the page when using these methods.

Opening the Widget when a user clicks a button

Using the api outlined above its possible to add have the widget open when users click an element on your page.

For example, if you have a button like this on your page:

<button id="livechat-widget-opener">Click Here to Speak to Us over Livechat</button>

Its possible to then use javascript, like in the snippet bellow, to add an EventListener to listen to click events on the button and trigger the Widget to open and close.

// get reference to element from the dom
const livechatButton = document.getElementById('livechat-widget-opener');
// add event listener to button
livechatButton?.addEventListener('click', () => {
    if (window.MessageBirdChatWidget) {
        window.MessageBirdChatWidget.toggleChat(true);
    }
})

Positioning the Widget

When the widget loads onto the page, it will check the page for a dom element with the id of live-chat-widget. If this element already exists the Widget will mount onto this element.

If a dom element with live-chat-widget does not exist. The Widget will create element and mount itself on said element.

This element will always be used as the container for the Widget on the host webpage.

Using CSS its possible to change the position of the Widget on your page or to integrate it seamlessly with your page layouts by changing properties on this element.

<div id="live-chat-widget" />