Omni Channel Engagement Hub : Initiating a Chat with a Custom Chat Button

In my previous blog, we created a new chat widget in the Omni Channel Engagement Hub admin area and embedded the widget into a web page. The widget allows customers to interact with agents having been routed using any rules configured within Omni Channel. This blog focuses on how we can leverage the Omni Channel SDK to initiate a chat from a custom button on a web page.

The above video details the steps included in using the Omni Channel SDK.

The Omni Channel SDK provided contains various JavaScript methods which can be used to perform operations such as initiating a new chat or passing contextual information like the the customer’s shopping basket amount, total owed or policy information to omni channel for the agent to be able to guide the conversation appropriately.

To get started, add the code snipped provided by Omni Channel into the web page. The widget will initially be visible on the web page.

We then need to hide the widget using data tags available within the Omni Channel SDK. There are several data tags which when used customises the out of the box chat widget provided by Omni Channel. The data tag data-hide-chat-button="true" should be added to the chat widget snippet.

On the click of the custom chat button, the initiate chat method should be called in order to initiate a new chat conversation. E.g.

 function openForm(){ Microsoft.Omnichannel.LiveChatWidget.SDK.startChat(); } 

We now need to add the function which will be triggered on the click of the button and will initiate a new chat conversation using a method provided in the Omni Channel Sdk.

To tie things together, we can add another data tag data-color-override="#67748c" to override the colour of the widget that was set in the Omni Channel chat design area in the admin app.

The image below shows the full script demonstrated in my video.

Hope that helps!