KB : Instruction on how to replace the icon (SVG) in chat widget

Purpose

This page describes the step-by-step instruction on how to change the icon to a custom vector image (SVG) in the Chat for JSM application external widget.

Use Case

The guide has been prepared to help users change the icon to make the chat widget consistent with the company brand. The request for how to do it was initialized by the customer under https://appfire.atlassian.net/browse/SUP-17972.

Runbook:

Prepare your SVG file or find the icon in one of the web pages that offer ready SVG icons (for example, https://www.svgrepo.com/ ).

Download the icon and convert the file into base64 format.

You can use the web-based generator - for example, https://base64.guru/converter/encode/image/svg

OR

you can convert the icon using the command line:

konradszkudlarski@Konrads-MBP Konrad % base64 -i <your_svg_file_name>.svg

The output should consist of the base64 string (example):

Edit the widget code and add the following reference to the CSS file in the </head> tag:

<head>
  <link rel="stylesheet" href="styles.css">
</head>

Create a syles.css file and add the following class to it:

.support-chat-icon{
background-image: url(data:image/svg+xml;base64,<paste_here_base64_svg>) !important;
}

Paste the base64 sting into the <paste_here_base64_svg>

Save both index.html and style.css and reload the page.

The icon should change as the following: