To change the appearance of the Chat Widget on an external website, you need to modify the widget’s HTML code that you’ve you have placed on the website, along with the CSS rules set on the page.
For example, to change the widget icon and color colour to #d4652c, add the following code to the web page where you placed the Chat Widget:
To add iconClass to the chat configuration Javascript:
| Code Block | ||
|---|---|---|
| ||
<html>
<body>
<script type="text/javascript">
var spartezSupportChat = {
portal: 1,
cloud: {
jiraId: "8ad73648-24b8-3d3c-bf91-f75ff508305b",
jiraUrl: "https://saisatyasatti.atlassian.net",
urls: {
rest: "https://chat-api.spartez-software.com",
ws: "https://chat-ws.spartez-software.com",
},
},
};
</script>
<script type="text/javascript" src="https://chat-api.spartez-software.com/chat.js"></script>
<style>.support-chat-icon {background-color: #d4652c !important;}</style>
<style>.new-conversation {background-color: #d4652c !important;}</style>
<style>.top-header {background-color: #d4652c !important;}</style>
<style>.spartez-support-chat-container .submit-button {background-color: #d4652c !important;}</style>
<style>.spartez-support-chat-container .send-message-button-main {background-color: #d4652c !important;}</style>
</body>
</html> |
Below The below code helps in changing the colour in the chat - widget (support-chat-icon) which is highlighted in as shown in the below screenshot-I.
| Code Block | ||
|---|---|---|
| ||
<style>.support-chat-icon {background-color: #d4652c !important;}</style> |
...
Below The below code helps in changing the colour in the chat - widget (new-conversation) which is highlighted in as shown in the below screenshot-II.
| Code Block | ||
|---|---|---|
| ||
<style>.new-conversation {background-color: #d4652c !important;}</style> |
...
Below The below code helps in changing the colour in chat - widget (top-header) which is highlighted in as shown in the below screenshot-III.
| Code Block | ||
|---|---|---|
| ||
<style>.top-header {background-color: #d4652c !important;}</style> |
...
Below The below code helps in changing the colour in chat-widget (submit-button) which is highlighted in as shown in the below screenshot-IV.
| Code Block | ||
|---|---|---|
| ||
<style>.spartez-support-chat-container .submit-button {background-color: #d4652c !important;}</style> |
...
Below The below code helps in changing the colour in the chat - widget (send-message-button-main) which is highlighted in as shown in the below screenshot-V.
| Code Block | ||
|---|---|---|
| ||
<style>.spartez-support-chat-container .send-message-button-main {background-color: #d4652c !important;}</style> |
...