Versions Compared

Old Version 17

changes.mady.by.user Derya Özdemir

Saved on

compared with

New Version Current

changes.mady.by.user Iryna Ihnatiuk

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, add the following code to the web page where you placed the Chat Widget:

To change color:

Option 1

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

...

Option 2

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

To add meta data:

Option 1

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

...

Option 2

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 override default meta data:

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

Option 1

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

...

Option 2

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

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

Code Block
chatWidget.show();

To hide the Widget button:

Code Block
chatWidget.hide();

...

To open the chat widget from any object in your website (not chat button only):
 Code Block
document.querySelector('chat-widget').shadowRoot.querySelector('.chat-icon-button').click();
To define the callbacks or listen to the events:
Option 1
 Code Block
chatWidget.onload = () => console.log('The Widget is fully loaded');
...
 Code Block
chatWidget.
...
onclose = () => console.log('The Widget is 
...
closed')
...
;
...
Option 2
 Code Block
chatWidget.
...
addEventListener('load', () => console.log('The Widget is 
...
fully loaded'));
OR
 Code Block
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):
Option 1
 Code Block
chatWidget.setAttribute('full-screen');
...
Option 2
 Code Block
<chat-widget full-screen></chat-widget>
To notify your backend when a new message arrives:
 Code Block
chatWidget.addEventListener('message', () => console.log('A message was missed!'));
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:
 Code Block
chat-widget::part(offline-icon) {
    background-image: url('my-icon.png');
}
To change the style of the Chat icon button in the hover state:
 Code Block
chat-widget::part(icon-button):hover {
    height: 30px;
    width: 30px;
}
To hide a specific Chat element:
 Code Block
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)
  • header-jira-ticket-icon (Jira ticket button in the Chat header)
...
To notify your backend when a new message arrives:
...
 Table of Contents
minLevel4
maxLevel4
include
outlinefalse
indent
stylenone
exclude
typelist
class
printabletrue
 Note
The old version of the Chat Widget is no longer supported. We highly recommend that you switch to the new version by replacing the old code snippet on your website with the new one to ensure the best possible experience for your customers. You can find information about the customization settings for the old widget below.
 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;
}