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 Property | Example value | Description |
---|---|---|
buttonPrimaryTextColor | #FFFFFF | Changes the primary button text colour |
buttonPrimaryTextColorDisabled | #888888 | Changes the primary button text colour when it's disabled |
buttonPrimaryBackgroundColor | #00008B | Changes the primary button background colour |
buttonPrimaryBackgroundColorHover | #000099 | Changes the primary button background colour when it's hover |
buttonPrimaryBackgroundColorActive | #000066 | Changes the primary button background colour when it's active |
buttonPrimaryBackgroundColorDisabled | #FFFFFF | Changes the primary button background colour when it's disabled |
buttonSecondaryTextColor | #888888 | Changes the secondary button text colour |
buttonSecondaryTextColorDisabled | #ADD8E6 | Changes the secondary button text colour when it's disabled |
buttonSecondaryBackgroundColorHover | #B0E0E6 | Changes the secondary button background colour when it's hover |
buttonSecondaryBackgroundColorActive | #87CEEB | Changes the secondary button background colour when it's active |
buttonSecondaryBackgroundColorDisabled | #B0C4DE | Changes the secondary button background colour when it's disabled |
buttonBorderRadius | 0px | Changes 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.
Updated 3 months ago