Add custom CSSUpdated a month ago

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: 

• The Chat button 
• The Chat window
• Chat campaigns

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>