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:
chatWidget = document.querySelector('chat-widget'); chatWidget.setAttribute('primary-color', '#2D60D8'); chatWidget.setAttribute('text-color', '#FFFFFF');
OR
<chat-widget primary-color="#2D60D8" text-color="#FFFFFF" </chat-widget>
To add meta data:
chatWidget.setAttribute('metadata', `[ { name: 'Age', value: 100, render: true, }, { name: 'Greeting', value: 'Hello world', render: true, }, { name: 'Hidden', value: 'hidden', render: false, }, ]`);
OR
<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:
chatWidget.setAttribute('auto-show', 'false');
OR
<chat-widget auto-show="false" </chat-widget>
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.