Button theming

Primary and secondary buttons

You can change both the primary and secondary colours on the chat button, either globally across each of the parts of the widget, invitation/form/window or configure each one differently.

On the form below, there are just primary buttons (red arrow points to primary button)



Then, for the web window, here you can see the primary buttons, but also the secondary buttons are both the quick replies, and cancel options. (Red arrow points to the primary button/blue to secondary button)



Button properties

Below, is the table of configuration that you can use to change the button colours, the chat theme property is what is used to change the colour.

Chat Theme PropertyExample valueDescription
buttonPrimaryTextColor#FFFFFFChanges the primary button text colour
buttonPrimaryTextColorDisabled#888888Changes the primary button text colour when it's disabled
buttonPrimaryBackgroundColor#00008BChanges the primary button background colour
buttonPrimaryBackgroundColorHover#000099Changes the primary button background colour when it's hover
buttonPrimaryBackgroundColorActive#000066Changes the primary button background colour when it's active
buttonPrimaryBackgroundColorDisabled#FFFFFFChanges the primary button background colour when it's disabled
buttonSecondaryTextColor#888888Changes the secondary button text colour
buttonSecondaryTextColorDisabled#ADD8E6Changes the secondary button text colour when it's disabled
buttonSecondaryBackgroundColorHover#B0E0E6Changes the secondary button background colour when it's hover
buttonSecondaryBackgroundColorActive#87CEEBChanges the secondary button background colour when it's active
buttonSecondaryBackgroundColorDisabled#B0C4DEChanges the secondary button background colour when it's disabled
buttonBorderRadius0pxChanges the button rounding

Here is an example of where the customer information is being set, for this example, the customer is already logged into the website, so we are passing in the information to the agent, to let them know the customer's name and email address, and also that they have already been verified

 themeCustom: {
    "buttonPrimaryTextColor": "#FFFFFF",
    "buttonPrimaryTextColorDisabled": "#888888",
    "buttonPrimaryBackgroundColor": "#000080",  // Navy Blue
    "buttonPrimaryBackgroundColorHover": "#00008B",  // Darker Navy Blue
    "buttonPrimaryBackgroundColorActive": "#000099",  // Active Navy Blue
    "buttonPrimaryBackgroundColorDisabled": "#000066",  // Disabled Navy Blue
    "buttonSecondaryTextColor": "#FFFFFF",
    "buttonSecondaryTextColorDisabled": "#888888",
    "buttonSecondaryBackgroundColor": "#ADD8E6",  // Light Blue
    "buttonSecondaryBackgroundColorHover": "#B0E0E6",  // Powder Blue
    "buttonSecondaryBackgroundColorActive": "#87CEEB",  // Sky Blue
    "buttonSecondaryBackgroundColorDisabled": "#B0C4DE",  // Light Steel Blue
    "buttonBorderRadius": "0px",
    "headerBackgroundColor": "blue",// Header Background Color
    },

To add this, you need to add it at the bottom of the script in this area here

"__8x8-chat-button-container-script_1333070733643e5b8fa7a791.52161248",
            align: "right",

ADD THE THEMING CODE HERE
        };

        var url = new URL("https://cloud8-cc-geo.8x8.com/vcc-chat-channels/public/webchat/discovery");

Then, the full script will look like this

    <!-- Place this code snippet anywhere you want the button to appear in your page. If no button has been configured in the chat script, it will not show up nor take any space. -->
    <div id="__8x8-chat-button-container-script_1333070733643e5b8fa7a791.52161248"></div>

    <!-- This script will not interfere with the button layout, you just need to include it in the same page. It must also be within the <body> section of the page, preferably just before the ending tag. -->
    <script type="text/javascript">
    (function(c, f, ef){
        var typeofC = Object.prototype.toString.call(c);
        var props = (typeofC === '[object Object]' && c) || {};
        var cb = f || (typeofC === '[object Function]' && c);
        var config = {
            scriptUuid: "script_1333070733643e5b8fa7a791.52161248",
            tenant: "Y2hyaXNjcm9tYmllZGVtbzAx",
            channelName: "WebChatChannel",
            channelUuid: "Ak3ULjXFQx-unSA6ebdW8A",
            domain: "https://vcc-eu11.8x8.com",
            buttonContainerId: "__8x8-chat-button-container-script_1333070733643e5b8fa7a791.52161248",
            align: "right",
        };

        var url = new URL("https://cloud8-cc-geo.8x8.com/vcc-chat-channels/public/webchat/discovery");
        var params = { domain: config.domain, tenant: config.tenant, channelUuid: config.channelUuid };
        url.search = new URLSearchParams(params).toString();
        fetch(url)
            .then(response => response.json())
            .then(data => config.domain = !data.domain ? config.domain : data.domain)
            .catch(error => console.warn('Failed to retrieve override domain, will continue using ', config.domain, error))
            .finally(() => loadChat());

        function loadChat() {
            var se = document.createElement("script");
            se.type = "text/javascript";
            se.async = true;
            se.src = props.loaderURL || (config.domain + "/CHAT/common/js/chatv3.js");
            Object.keys(config).forEach(function (k) { se.dataset[k] = config[k] });
            Object.keys(props).forEach(function (k) { se.dataset[k] = props[k] });
            function handleInitEvent(e) {
                var initFn = e.detail.init;
                initFn(config, cb);
                se.removeEventListener('init', handleInitEvent)
            }
            function handleErrorEvent(e) {
                ef && ef(e);
                se.removeEventListener('customerror', handleErrorEvent);
            }
            se.addEventListener('init', handleInitEvent);
            se.addEventListener('customerror', handleErrorEvent);
            var os = document.getElementsByTagName("script")[0];
            os.parentNode.insertBefore(se, os);
        }
    })(function(chatApp) {
    chatApp.setCustomerInfo({
      "First name": "James",
      "Last name": "Smith",
      "Verified": 'yes',
      "Email address": "[email protected]"
    })
  });
    </script>

Images with buttons changed

Then, when this is ran, you can see how it looks on the chat widget, again the red arrow showing the primary and blue the secondary button. In this as well, the “buttonBorderRadius”a was set to “10px”, to make the buttons more rounded.