Installing Chat

Updated 2 months ago by Chloe Kesler

You can add a chat widget to your website, this is a great way to give your customers quick and convenient access to your support team.

Adding the chat on your website

To add a chat widget on your website:

  1. In Gorgias, click on "Integrations," then click "Chat"
  2. Click "Add chat"
  3. Name your chat. This will usually be the name of your company
  4. Click Add chat to your store. If you're not on Shopify, you can copy and paste the HTML code

You're done!

*You can also add multiple chat integrations*

Remove 'Powered by Gorgias' branding

You 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

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);
Adding an “open the chat” link

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>


How did we do?