Versions Compared

Old Version 3

changes.mady.by.user Derya Özdemir

Saved on

compared with

New Version 4

changes.mady.by.user Derya Özdemir

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Panel
panelIconIdatlassian-info
panelIcon:info:
bgColor#F4F5F7

This page is about Chat for JSM Cloud. Using Server or Data Center? Click here.

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:

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

...

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

To add meta data:

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

...

Code Block
<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 hide Widget:

Code Block
chatWidget.setAttribute('auto-show', 'false');

...

Expand
titleCustomization for the old widget

To add iconClass to the chat configuration Javascript:

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

To add CSS rules:

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

To change the color of the top bar:

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

To change the color of the “New Conversation” button:

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

To change the color of the chat icon:

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