/
How to replace the icon (SVG) in Chat for JSM widget

How to replace the icon (SVG) in Chat for JSM widget

This page describes the step-by-step instructions on changing the icon to a custom vector image (SVG) in the Chat for JSM app external widget.

Runbook

  1. 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/).

  2. Convert the file into base64 format using one of the following methods:

    • You can use a web-based generator. For example, https://base64.guru/converter/encode/image/svg.

    • Or you can convert the icon using the command line:

      base64 -i <your_svg_file_name>.svg

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

  3. 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>

  4. 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; }

  5. Paste the base64 sting into the <paste_here_base64_svg>.

  6. Save both index.html and style.css.

  7. Reload the page.

The icon should change as the following: