I recently explained how we can customize the appearance of chat widgets within Microsoft’s Omnichannel for Customer Service using data tags. In this post I will expand on that theme by looking how with the v2 chat widget code snippet we have additional customizations options.
You can read my post about data tags here. Data tags are great! They are simple to use and offer a quick way to customize a widget with very little coding ability.
But what-if you want to go further? …. We also have the v2 style chat widget with additional capabilities.
V2 CHAT Widget
When we create a chat channel a code snippet is generated. That snippet can then be added into any website.
You may have a choice of 2 widgets available. (As shown below.) The 2.0 widget is the one you want!
Note: I have recently noticed in a North American based trial that the v1 widget option wasn’t present. I’m based in the UK and in Feb 2024 we still see two options. But based on this I assume at some point only the 2.0 widget will be available.
Data Customization Callback
The concept here is to add a callback function. Then within that function we can define values for many style properties.
There are loads of properties! And whilst I have experimented with many loads exist which I’m yet to use. Luckily Microsoft do document all of the possibilities. I found this link useful. As Microsoft describe many of the components of a chat widget and how they might be customized.
In this post I will show an example of how I have used several of the options to customize my widget. Hopefully this will explain the concept and you can then user the Microsoft documentation to explore all the possibilities.
I started off with my widget just as it was generated. You can see my widget below. Notice the “v2” tag which confirms I am using the latest style widget.
This snippet creates me a widget which looked like this …
Now before I add the callback function, it might be worth pointing out that I can still use data tags with the v2 widget. To demonstrate this I have forced a colour change on my widget and changed my “X” button to be “End Chat”.
data-color-override="#DAC4E9" data-custom-close-button-text="End Chat"
Below you can see my new widget. Its now a “lovely” shade of pink!
But as mentioned data tags are limited in their capabilities! I can’t for example, alter the height and width of my widget. For this I need to add a callback function. To achieve this I first add a data tage to define the name of my callback function.
data-customization-callback="lcw"
Let’s begin by adding my callback tag and creating a function which alters the width and height of my widget.
Below you can see my revised code snippet and my callnack function.
This is my callback function ….
<script>
function lcw() {
return {
styleProps: {
generalStyles:{
width: "500px",
height: "800px"
}
}
}}
Now you can see that my widget is much larger! (Notice how much more text the customers can see without scrolling.)
So, what else can I change. Loads!! Let me demonstrate just a couple of ideas. I have control not just of the main chat window but also the initial widget offering the chat, the loading screen and more.
My widget starts off looking like this …
And my loading screen looks like this …
As an example I have created the following callback function. Notice that it is setting properties on my loading pane and my chat button.
<script>
function lcw() {
return {
styleProps: {
generalStyles:{
width: "500px",
height: "800px"
}
},
loadingPaneProps: {
controlProps: {
titleText: "Hello there!",
subtitleText: "Please wait...",
hideSpinnerText: true,
spinnerSize: 3
},
styleProps: {
titleStyleProps: {
fontFamily: "Impact",
fontSize: "44px"
},
subtitleStyleProps: {
fontSize: "28px"
}
}
},
chatButtonProps: {
controlProps: {
hideChatSubtitle: true
}
}
}}
My chat button now looks like this (Notice, no subtitle!) …
And my loading screen now looks like this …
I am not trying to pretend that my new widget and loading screen look good! This is just an example to demonstrate the art of the possible. I am confident with a little effort you can create something much more pleasing.
Hopefully this post has managed to demonstrate how we can customize the appearance of our chat widgets. Enjoy.
NEIL PARKHURST 
Leave a comment