Gorgias logo
Gorgias logo

All articles

Replace the Chat widget buttonUpdated 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 replace our Chat widget button with your own by providing some custom code - the following custom script would replace the original widget button with a custom button element.

1<script>
2var initGorgiasChatPromise = (window.GorgiasChat) ? window.GorgiasChat.init() : new Promise(function (resolve) { window.addEventListener('gorgias-widget-loaded', function () { resolve();})});
3
4initGorgiasChatPromise.then(function () {
5 var timer = setInterval(function () {
6 var chatButtonHead = document.querySelector('#gorgias-chat-container')?.querySelector('#chat-button')?.contentWindow.document.querySelector('head');
7 if (!chatButtonHead?.children.length) {
8 return;
9 }
10 clearInterval(timer);
11
12 var chatButtonIframe = document.querySelector('#chat-button');
13 chatButtonIframe.style = "display:none;"
14 var myButton = document.createElement('button');
15 myButton.style = `
16 position: fixed;
17 right: 100px; bottom: 10px;
18 z-index: 2147483000;
19 width: 50px;
20 height: 50px;
21 border-radius: 10px;
22 background-color: blue;
23 `
24
25 // onClick, behave like a chat opener
26 myButton.onclick = function () {
27 if (GorgiasChat.isOpen()) {
28 GorgiasChat.close();
29 } else {
30 GorgiasChat.open();
31 }
32 }
33 document.body.appendChild(myButton);
34 }, 50);
35});
36</script>
Was this article helpful?
Yes
No