Branding Omnichannel Chat Widget

One of the most basic functions of Omnichannel is the humble chat widget. This lovely little feature is there to be embedded on a webpage. People browsing the website can see it in the corner (or wherever it’s placed), and can then click on it to get help from a customer service person.

When clicked on, the chat window immediately opens, and people can connect to a live advisor. As mentioned previously, it’s also possible to add initial questions to the interface for the customer to fill out, and the information is then provided to the customer service agent.

All of this is wonderful. However, companies are now, more than ever, conscious of their branding. And by branding, I’m not just referring to a corporate logo. Businesses will often have colour schemes that are globally identified with them, along with fonts as well. Think of Coca Cola, for instance. The cursive script used is identifiable wherever you are in the world, even when it’s written in a different language, or the other way around!

With the default system customisation options, the chat widget itself is able to be pointed to a logo to be used in it. However further customisations and options, such as the colour scheme, are limited to pre-set options. So what happens if a company wishes to extend this further, and keep things in line with their corporate image?

Well, thankfully due to some extended development tools, this is able to be done. Below, I’m going to set out some of the functionality that is available through the usage of different scripts that can be added to the webpage within the chat widget code, which will then enhance it even further.

Pop out mode

It’s great to have the chat widget on the same screen, down in the corner somewhere. But what if you’re wanting to have it pop out, and present in a different window? It’s not possible through the default configuration, but it is possible through the usage of code. Simply adding the following line before the ‘></script’ tag at the end of the code block, we get to see this happen:

data-open-in-window="true"

It’s also possible to set the tag to “false”, which will then obviously not pop it open in a new window, but will keep it within the widget itself.

Font options

Not only are we able to pop out the chat window, we’re also able to use custom fonts. Again, the default font options leave a lot to be desired, in my opinion. Given the wide range of fonts being able to be used on websites nowadays, it’s definitely very nice to be able to use more fonts for the chat widget itself. I’d be slightly cautious here against being too ‘wild’ with them, as obviously we want to ensure that they’re accessible for all, and not difficult to read for some people.

Adding the following code snippet before the ‘></script’ tag at the end of the code block will make this happen. Note that we do need to specify the font that we’re wanting to use, though not all fonts may be available on website pages:

data-font-family-override="Stencil; Segoe UI"

Also bear in mind that different browsers may have compatibility issues with more advanced fonts, along with mobile devices, so I’d advise to be careful here. Ensure that you do test this out as widely as you can. There is also a second option font that can be used, in the case where the main font that you’ve specific is not available.

Custom colours

The final piece of customisation that I’d like to mention (at least for the purposes of this blog post) is around colours. Again, there are only a few pre-set colours available to pick from for the chat widget interface, which is a shame. For this, I’d definitely have expected to see the ability to select more colours, or have a colour picker/HEX value column available to use. After all, if it’s possible to do this in Microsoft Word (or other programs), why not Dynamics 365?

So again, there’s a nifty little code segment that can be added to the chat widget code script on the webpage. This requires you you know the HEX value for the colour that you’re wanting (if you don’t know this off the top of your head, there are free tools out there that can easily and quickly provide it to you).

data-color-override="#174F15

Personally, I think that the colour option is the best one to go for, as you can immediately utilise any custom colours that your branding contains!

Overall, I think that these are really great, and as you can see, I’ve played around with them for my own environment!

Have you ever had a need to customise something like this, but faced challenges? Drop a comment below – I’d love to hear!