Add custom CSSUpdated 4 months ago

Chat cannot be installed on your store using Quick installation for Shopify method if you want to use Advanced Chat Customization. Quick install re-injects chat in its default state, removing any visual customization.

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>