The guide of creating your own Live Chat icon

Introduction

As you've noticed, SignalZen comes with the default live chat widget icon that is a circle with the chat icon inside.

However, some client websites might come with a different styling in terms of element shapes, sizing or require more aggressive positioning of the live chat trigger in terms of the style.

SignalZen offers full support for colours palette defining individually for each website, but that's sometimes is not enough when it comes to the main element - the live chat icon (or the trigger of the live chat box).

This article aims to explain how to change the default SignalZen live chat icon into something that you or your designer could bake in a couple of steps.

Creating Live Chat icon

Prerequisites

The creating of the Live Chat icon requires 3 images to be created:

  • The icon image that is visible when the chat is closed
  • The icon image that is visible when the chat is open (could imply closing the chat box action)
  • The icon image that is visible when the chat is loading (could imply preloader)

We recommend to keep the same size for all the 3 images and use .gif, .png or .svg formats. All the 3 images will serve correspondingly as the live chat icons at different states of the live chat box lifecycle.

HTML/JavaScript integration

This section of the article is dedicated to those who are using our HTML/JavaScript integration type.

Firstly, please upload the 3 images from the prerequisites section to some sort of public place so that the 3 images could have their own HTTPS URL addresses. We will use the URLs inside the SignalZen widget initialisation code.

Lastly, you need to declare the size of images and the 3 image URLs inside the code like described in our Docs.

Wordpress integration

SignalZen's Wordpress integration supports live chat icon change as well.

Look at the picture below to find the relevant configuration part.

WordPress Live Chat Icon

Please don't forget to check the "Custom Chat icon enabled" checkbox to enable your configured custom chat icon.

Joomla integration

Our Joomla integration has configuration section which you can open as a tab.

See the picture below to find the relevant configuration part.

Joomla Live Chat Icon

Please check the "Custom Chat icon enabled" checkbox to start showing your custom icon images.

Drupal integration

Recently, we updated the Drupal integration to support the custom chat icon uploads too.

See the picture below to find the relevant configuration part.

Drupal Live Chat Icon
Please check the "Custom Chat icon enabled" checkbox in order to start showing your custom icon images.

Any questions? Shoot us a message!