Customize the Chat Widget on your Website

To change the appearance of the Chat Widget on an external website, you need to modify the widget’s HTML code that you’ve placed on the website, along with the CSS rules placed on the page.

For example, to change the icon color to darkcyan, add the following code to the web page where you placed the Chat Widget:

To change color:

chatWidget = document.querySelector('chat-widget');
chatWidget.setAttribute('primary-color', '#2D60D8');
chatWidget.setAttribute('text-color', '#FFFFFF');

OR

<chat-widget primary-color="#2D60D8" text-color="#FFFFFF">
</chat-widget>

To add meta data:

chatWidget.setAttribute('metadata', `[
{ name: 'Age', value: 100, render: true, },
{ name: 'Greeting', value: 'Hello world', render: true, },
{ name: 'Hidden', value: 'hidden', render: false, },
]`);

OR

<chat-widget
metadata="[
{ name: 'Age', value: 100, render: true, },
{ name: 'Greeting', value: 'Hello world', render: true, },
{ name: 'Hidden', value: 'hidden', render: false, },
]">
</chat-widget>

To override default meta data:

chatWidget.setAttribute('metadata', `[
{ name: 'pageUrl', value: 'hidden' },
{ name: 'userLocale', value: 'hidden' },
{ name: 'timeZone', value: 'hidden' },
{ name: 'ip', value: 'hidden' },
]`);

To show the Widget button automatically:

chatWidget.setAttribute('auto-show', 'true');

OR

<chat-widget auto-show="true"></chat-widget>

To show the Widget button (e.g., if ‘auto-show' is set to 'false'):

chatWidget.show();

To hide the Widget button:

chatWidget.hide();

You can define the callbacks or listen to the events:

chatWidget.onload = () => console.log('The Widget is fully loaded');

OR

chatWidget.addEventListener('load', () => console.log('The Widget is fully loaded'));

chatWidget.onclose = () => console.log('The Widget is closed');

OR

chatWidget.addEventListener('close', () => console.log('The Widget is closed'));

To use the Widget in full-screen mode (the Conversation List will open automatically in full screen on the page or in a frame):

chatWidget.setAttribute('full-screen');

OR

<chat-widget full-screen></chat-widget>

Using ::part to Style Chat Widget Elements

To change the styles of specific Chat widget elements, you can use the ::part pseudo-element:

For example, to change the styles of the specific elements, add the following code to the web page where you placed the Chat Widget (inside <style> tag):

To change the style of the Chat icon in offline mode:

chat-widget::part(offline-icon) {
    background-image: url('my-icon.png');
}

To change the style of the Chat icon button in the hover state:

chat-widget::part(icon-button):hover {
    height: 30px;
    width: 30px;
}

To hide a specific Chat element:

chat-widget::part(authentication-section) {
    display: none;
}

Here is the list of Chat elements that can be customized using the ::part pseudo-element:

• wrapper (the body of Chat)

• icon-button (the button element with icon)

• close-icon (the icon for closing the button)

• offline-icon (the icon with offline icon)

• online-icon (the icon with online icon)

• authentication-section (element of logging/registering buttons in the home view)

• attachment-button (the attachments button)

• author-name (the author name on the conversations history view)

• avatar (the avatar on the conversations history view)

• button (every button)

• header (Chat header bar)

• header-close-icon (close button in the Chat header)

var spartezSupportChat = {
        url: 'https://jira.spartez.com',
        portal: 2,
 
 
        // ######## ADDED ############
        iconClass: 'my-chat-icon-class'
        // ######## END OF ADDED #####
    }

.my-chat-icon-class.support-chat-icon {
    background-color: darkcyan !important;
}

.spartez-support-chat-container .top-header{
background-color:#172b4d !important;
}

.chats-list button.new-conversation{
background-color:#172b4d !important;
}

.support-chat-icon {
background-color:#000 !important;
}