Chat

Updated 4 minutes ago ​by Romain Lapeyre

You can add a chat widget on 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. Copy and paste the code snippet that appears after you click "Save" to your website's HTML code.  If you don't know how please send us an email to support@gorgias.io we'll be glad to help out!

After you’ve added chat, when a visitor or an app user starts a conversation with you, it will create a chat ticket in Gorgias. You’ll see a notification in "Chats" section of the right sidebar of Gorgias, and the ticket will auto-refresh when the customer responds.

Chat ticket

Adding the chat on Shopify

If you’re using Shopify, you can automatically see the Shopify profile of the customer next to the chat conversation when the customer is logged in on your website.

To add a chat widget on your store:

  1. In Gorgias, click on "Integrations," then click "Chat"
  2. Click "Add chat"
  3. Customize the look of your chat, then click "Add new chat"
  4. Click on the "Shopify" tab, and copy the code snippet that appears
  5. Go to your Shopify account, and open "Online Store"
  6. Click on the "..." icon in the top right corner


  7. Click "Edit HTML/CSS" in the drop-down menu
  8. Open the "theme.liquid" file
  9. Paste the code below after the {% section footer %} tag. 

Add chat to Shopify theme.liquid

If you have any trouble adding the code above, book a 5 minute call with us so we can give you a hand!

Adding the chat with Google Tag Manager

  1. Go to your Google Tag Manager account
  2. Click on "Tags" on the left side of the page, then click "New"
  3. Click "Tag Configuration"
  4. Under "Custom," click "Customer HTML"
  5. Copy and paste the code snippet from Gorgias, then click "Save"


  6. Click "Add Trigger," then click "All Pages"
  7. Name the trigger "Gorgias"
  8. Click "Save"
  9. "Submit" your changes, then click "Continue"

Nice Job! After you've added the chat widget, it will appear on every website where you use Google Tag Manager. 

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> #sk-messenger-button, #sk-container { margin-bottom: 50px !important; } </style>

Hiding the chat on mobile

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

<style> #sk-messenger-button, #sk-container { margin-bottom: 50px !important; } </style><style> #sk-messenger-button, #sk-container { margin-bottom: 50px !important; } </style>

The chat is conflicting with other widgets

Add this code to your site: 

<style>#sk-messenger-button, #sk-container {z-index: 999999999 !important;}</style>

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

<a onclick="$('.messenger-button-shown').click();">Start a chat with our team</a>

How did we do?