Chat

Updated 1 week ago by Romain Lapeyre

You can add a chat widget to your website. Every time a user starts a conversation, the chat widget will open a ticket in Gorgias. You can respond to the ticket to chat with the user. You can also add multiple chat integrations.

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!

Set yourself as available for chat

You can determine when you're available to chat with customers or not.

If no agent is available, your chat widget will go to offline mode. When a visitor initiates a chat, they will receive your chat auto-responder message.

To set your availability, click on your name at the bottom right, and use the Available for chat toggle.

Chat online/offline status

The chat can be either online or offline. 

Here's how the offline mode gets triggered:

  • If your entire team is not connected on Gorgias
  • If you're connected to Gorgias but everybody's status is not available for chat
  • If your whole team hasn't been active on Gorgias for 30min. Why do we do this? If one of your team members leaves their computer on for the whole weekend, we want to avoid leaving the chat online and setting expectations for immediate responses while your team is not here. 
The chat status might take up to 5 minutes to update after you open/close Gorgias or change your status

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:

var gorgiasChatInterval = window.setInterval(function () {
if (Smooch) {
window.clearInterval(gorgiasChatInterval); // this line breaks out of the loop - make sure it's not deleted.

var iframe = document.querySelector('#gorgias-web-messenger-container');
var styles = document.createElement('style');
styles.textContent = '.logo-wrapper{display: none}'
iframe.contentDocument.querySelector('body').appendChild(styles)
}
}, 100);

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>


How did we do?