Advanced chat customization

Updated 3 months ago by Chloe Kesler

If you would like to further customize the chat widget, you can follow the instructions bellow. This article is meant to serve simply as a reference point for you and your team and following these instructions will require JS, HTML and possibly Shopify liquid knowledge.

Remove 'Powered by Gorgias' branding

You can remove the 'Powered by Gorgias' branding in the chat widget by adding this JS script on your HTML page:

<script type="text/javascript">
var gorgiasChatInterval = window.setInterval(function () {
var iframe = document.querySelector('#gorgias-web-messenger-container');
if (iframe) {
var head = iframe.contentWindow.document.querySelector('head')
if (head.children.length) {
window.clearInterval(gorgiasChatInterval); // this line breaks out of the loop - make sure it's not deleted.
var styles = document.createElement('style');
styles.textContent = '.logo-wrapper{display: none}'
head.appendChild(styles)
}
}
}, 100);
</script>

Changing the position of the chat widget

You can move the chat widget up on the page. If you want to do so, paste the HTML code below to move the chat widget up 50px (50 pixels).

<style> #gorgias-web-messenger-container { margin-bottom: 50px !important; } </style>

Hiding the chat on mobile

To hide the chat on mobile, add this code to your site: 

<style> @media (max-width: 576px) {#gorgias-web-messenger-container {display: none}} </style>

The chat is conflicting with other widgets

If your chat widget is conflicting with other widgets, add this code to your site: 

<style> #gorgias-web-messenger-container {z-index: 999999999 !important;} </style>

Subscribe to chat events

Sometimes it's useful to do something when the chat widget is open or closed. You can use the example below to do that. Notice that the code below uses window.setInterval - that is because the chat JS code is loaded asynchronously and we don't know if it's loaded or not so we have to check periodically:

var gorgiasChatInterval = window.setInterval(function () {
if (Smooch) {
window.clearInterval(gorgiasChatInterval); // this line breaks out of the loop - make sure it's not deleted.
// you can also use widget:open here's the complete list of events: https://github.com/gorgias/smooch-js#events
Smooch.on('widget:closed', function() {
// your code should go here
});
}
}, 100);

If you want to add a link on your page to open the chat when clicked, use the code below:

<a onclick="Smooch.open();">Start a chat with our team</a>

Add custom CSS

If you wish to additionally customize chat widget you can add your code according to the instructions below:

<script type="text/javascript">
var gorgiasChatInterval = window.setInterval(function () {
var iframe = document.querySelector('#gorgias-web-messenger-container');
if (iframe) {
var head = iframe.contentWindow.document.querySelector('head')
if (head.children.length) {
window.clearInterval(gorgiasChatInterval); // this line breaks out of the loop - make sure it's not deleted.
var styles = document.createElement('style');
styles.textContent = '.whatyouwanttochange {property: value}' // the custom CSS you want to inject
head.appendChild(styles)
}
}
}, 100);
</script>

Remove the chat based on country code

This requires a paid subscription on https://ipstack.com/

If you only work with certain countries you might want to only treat chat messages from certain countries. The code below hides the chat for ALL countries except United States (US) and Mexico (MX)

<script>
// change these to your own values
var ipstackAPIKey = 'GET YOUR API KEY FROM: https://ipstack.com/'
var countryCodeWhiteList = ['US', 'MX']

// do not change the code below
var countryCode = window.localStorage.getItem('countryCode')
if (!countryCode) {
// used to prevent extra calls to ipstack

countryCode = 'unknown'
$.ajax({
url: 'https://api.ipstack.com/check?access_key=' + ipstackAPIKey + '&fields=country_code',
dataType: 'jsonp',
success: function (json) {
if (json && json.country_code) {
countryCode = json.country_code
}
}
})
window.localStorage.setItem('countryCode', countryCode)
}

var gorgiasRemoveChatInterval = window.setInterval(function () {
var iframe = document.querySelector('#gorgias-web-messenger-container');
if (iframe && !countryCodeWhiteList.includes(countryCode)) {
window.clearInterval(gorgiasRemoveChatInterval); // this line breaks out of the loop - make sure it's not deleted.
iframe.remove()
}
}, 50);
</script>


How did we do?


Powered by HelpDocs