In this post, we will look at how to set up Omnichannel Proactive Chat in order to engage with your customers.
Firstly, what are proactive chats? Let’s take a step back. In Omnichannel, we can add chats to a webpage, which look like below:
When a customer needs to chat, they will click on the chat icon, which then launches the full chat widget:
This is great, except in times where we want to be the ones reaching out to a customer to make sure they have everything they need. As an example, think of when you are on a shopping website as a customer, and you get that pop-up asking if everything is ok. Or when you spend time on a page, then leave the page and get a pop-up asking if you need any help. These types of scenarios we can configure in Microsoft Omnichannel.
First, to enable proactive chat on a widget, you will need to enable it – note if you make the change you may need to wait 15 minutes for Omnichannel config to take effect:
If you don’t enable it for a chat widget, you may see this error in the console when trying to run proactive chat widget code – “Failed to process message from parent: Error: Proactive chat is not enabled for the widget”:
Now, let’s add some code to show how proactive chat works.
The HTML code looks like below, and you can grab a copy of it at the Microsoft Docs here:
If we look at the code, we can see the body is straight forward, it’s the snippet from our chat widget without any changes:
In the top section, we are setting custom context variables, in this case we are sending through some data that may be useful to the agent regarding the proactive nature of the chat:
And we are adding an event listener to wait for 5000 milliseconds (5 seconds) before displaying a message to the user:
Now, after 5 seconds, the chat icon changes from:
To:
Clicking Chat Now will invoke an actual chat:
Custom context variables:
Likewise, we can invoke this when a customer is leaving the page.
Here we are using window.document.body.onmouseleave and a boolean variable to determine whether to pop the proactive chat or not:
There are more examples at the Microsoft Docs site.
Enjoy!
I AM SPENDING MORE TIME THESE DAYS CREATING YOUTUBE VIDEOS TO HELP PEOPLE LEARN THE MICROSOFT POWER PLATFORM.
IF YOU WOULD LIKE TO SEE HOW I BUILD APPS, OR FIND SOMETHING USEFUL READING MY BLOG, I WOULD REALLY APPRECIATE YOU SUBSCRIBING TO MY YOUTUBE CHANNEL.
THANK YOU, AND LET’S KEEP LEARNING TOGETHER.
CARL
