Page Comparison

...

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');

...

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

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)

...