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 set on the page.
...
| 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 code helps in changing the colour in chat-widget which is highlighted in screenshot-I
| Code Block | ||
|---|---|---|
| ||
<style>.support-chat-icon {background-color: #d4652c !important;}</style> |
...
Below code helps in changing the colour in chat-widget which is highlighted in screenshot-II
| Code Block | ||
|---|---|---|
| ||
<style>.new-conversation {background-color: #d4652c !important;}</style> |
...
Below code helps in changing the colour in chat-widget which is highlighted in screenshot-III
| Code Block | ||
|---|---|---|
| ||
<style>.top-header {background-color: #d4652c !important;}</style> |
...
Below code helps in changing the colour in chat-widget which is highlighted in screenshot-IV
| Code Block | ||
|---|---|---|
| ||
<style>.spartez-support-chat-container .submit-button {background-color: #d4652c !important;}</style> |
...
Below code helps in changing the colour in chat-widget which is highlighted in screenshot-V
| Code Block | ||
|---|---|---|
| ||
<style>.spartez-support-chat-container .send-message-button-main {background-color: #d4652c !important;}</style> |
...