Page Comparison

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.

...

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

</chat-widget>

To add meta data:

...

<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

...

show the Widget automatically:

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

...

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

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

chatWidget.show();

To hide the Widget:

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 be open automatically on full screen on the page or in a frame)

chatWidget.setAttribute('full-screen');

OR

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

...