Gorgias logo
Gorgias logo

All articles

Add custom CSSUpdated 2 months ago

This suggestion isn't an official feature of our Chat widget, so our support for it is limited - we recommend that it be implemented by someone with a technical background.


You can't use the 1-click Chat installation when using Advanced Chat Customization, as the 1-click simply re-injects the Chat snippet in it's default state.

If you want to customize the visual aspect of the Chat widget, you can add additional CSS rules to each of the three following sections: 

Add the following script to your web page where the Chat is installed and modify the lines xxxStyle.textContent = '...', replacing the content with your own CSS rules:

1// Use this script to customize the Chat button.
2 <script>
3 var initGorgiasChatPromise = (window.GorgiasChat) ? window.GorgiasChat.init() : new Promise(function (resolve) { window.addEventListener('gorgias-widget-loaded', function () { resolve();})});
4
5 initGorgiasChatPromise.then(function () {
6
7 var timer = setInterval(function () {
8 var chatButtonHead = document.querySelector('#gorgias-chat-container')?.querySelector('#chat-button')?.contentWindow.document.querySelector('head');
9 if (!chatButtonHead || ![...chatButtonHead?.children].some(x => x.getAttribute("data-emotion"))) {
10 return;
11 }
12 clearInterval(timer);
13
14 var buttonStyle = document.createElement('style');
15 buttonStyle.textContent = '#gorgias-chat-messenger-button {background-color: orange; transition: background-color 200ms ease;}'; // the custom CSS for the chat button
16 chatButtonHead.appendChild(buttonStyle);
17 }, 50);
18 })
19 </script>
20//Update XXXXXX below to the desired Color Hex Code:
21<script>
22 var initGorgiasChatPromise = (window.GorgiasChat) ? window.GorgiasChat.init() : new Promise(function (resolve) { window.addEventListener('gorgias-widget-loaded', function () { resolve();})});
23initGorgiasChatPromise.then(function () {
24 GorgiasChat.on('widget:opened', function () {
25 var timer = setInterval(function () {
26 var chatWindowHead = document.querySelector('#gorgias-chat-container')?.querySelector('#chat-window')?.contentWindow.document.querySelector('head');
27 if (![...chatWindowHead?.children].some(x => x.getAttribute("data-emotion"))) {
28 return;
29 }
30 clearInterval(timer);
31
32
33 var chatStyle = document.createElement('style');
34 chatStyle.textContent = '.card-header h2 {color: #XXXXXX !important; };';
35 chatWindowHead.appendChild(chatStyle);
36 }, 50);
37 })
38
39
40 })
41</script>
1// Use this script to customize the chat window.
2 <script>
3 var initGorgiasChatPromise = (window.GorgiasChat) ? window.GorgiasChat.init() : new Promise(function (resolve) { window.addEventListener('gorgias-widget-loaded', function () { resolve();})});
4
5 initGorgiasChatPromise.then(function () {
6 GorgiasChat.on('widget:opened', function () {
7 var timer = setInterval(function () {
8 var chatWindowHead = document.querySelector('#gorgias-chat-container')?.querySelector('#chat-window')?.contentWindow.document.querySelector('head');
9 if (![...chatWindowHead?.children].some(x => x.getAttribute("data-emotion"))) {
10 return;
11 }
12 clearInterval(timer);
13
14 var chatStyle = document.createElement('style');
15 chatStyle.textContent = '.message-window-iframe-1g7otri {box-shadow: none; background-color: lawngreen}'; // window header green
16 chatWindowHead.appendChild(chatStyle);
17 }, 50);
18 })
19
20 })
21    </script>
Was this article helpful?
Yes
No