...
| Code Block |
|---|
<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:
...
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 the user about a new message when the widget is hidden:
| Code Block |
|---|
chatWidget.addEventListener('message', () => console.log('A message was missed!')); |
| 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. |
...