When creating widgets that appear on the front page of a companies website or even within in their customer service section, some considerations need to be made. It is important the widgets reflect the brand guidelines of the organisation and blend in with the website, otherwise they will look out of place. This post covers how to create custom widgets for the Omni Channel Engagement Chat widget.

Within Omni Channel Engagement, Chat Widgets are created per channel and linked to the related work-stream. This means you can have multiple live chat widgets which have a different look and feel depending on where you want the widget to live on your website(s) and your strategy surrounding live chat.

Navigate to the Omni Channel Administration App and either create a new Chat Widget or open an existing record and navigate to the ‘Design’ Tab – this is where the styling is configured, as shown in the screenshot below.

At the time of writing, there is the capability to configure the theme colour (from a drop-down list, not the hexadecimal code), a custom SVG logo, the title, subtitle and link operating hours to the chat (which configures when the chat widget shows up)

The screenshot below shows where these controls affect on the actual widget and how they translate to the chat widget that displays when a customer has started a conversation. When configuring the chat widget, it would be helpful to be mindful of a few things when designing the contents:

  • Test out the different colours – because you cannot use hexadecimal codes you need to find the closest colour which matches to your brand
  • Make sure the logo and the colours work together
  • The subtitle is very short so be mindful of what you put here, you can see in the screenshot below it gets cut off. The subtitle is also not on the expanded view
  • The title can be easily cut off on the minimised widget, but on the expanded widget there is plenty of space
  • You cannot customise the font which is used

Make your changes and wait the 15 minutes update time for the widget to be updated and then go ahead and test out your changes. I hope this post has given you a starting point to some of the considerations when making your widgets for the Live Chat Channel within Omni Channel Engagement look more like your own and fit in with your website!