You can easily change the embedded chat tab color by inserting either the basic or advanced JavaScript settings in step 1 of the live chat HTML code (the full HTML code is detailed at Documentation – Chatstack jQuery HTML Code):

Basic Color Themes

LiveHelpSettings.theme = 'turquoise';

Various theme options are available: default , green , turquoise , blue , purple , pink and orange The above line is inserted in the step 1 chat code just like the following example code. This code is only a snippet of the full live chat HTML code.

var LiveHelpSettings = {};
LiveHelpSettings.server = 'www.example.com';
LiveHelpSettings.embedded = true;
LiveHelpSettings.theme = 'turquoise';
(function(d, $, undefined) { 
    $(window).ready(function() {
         // JavaScript
         ...
    });
})(document, jQuery);

Advanced Color Themes

You can also set the chat tab colors using the advanced options, this includes setting the normal color state, hover color state and the light/dark color of the text and expand/collapse icon. You will need to use the following JavaScript settings for this advanced option:

LiveHelpSettings.colors = {tab: {normal: '#dddedf', hover: '#c9cacc'}};
LiveHelpSettings.theme = 'dark'; // light or dark

WHMCS Customers

WHMCS customers can edit the live chat HTML code within their WHMCS hook file. This file is located at /whmcs/includes/hooks/livehelp.php with the live chat HTML code at approximately lines #120 – #125. Once this code is updated you’ll be able to see the new chat tab colors on all your WHMCS generated web pages.

If you are experiencing any issues with changing the chat tab colors, feel free to email us at [email protected] or request a live chat.