Gorgias logo
Gorgias logo

All articles

Set up ChatUpdated 2 months ago

Chat allows customers to get in touch with your business without needing to send an email or wait long for a reply.

Apply for our Chat Masterclass 

When working on a Chat ticket, you'll see additional buttons below your text input field that will let you insert bold, underlined, and italic text, as well as give you the ability to create hyperlinks, insert inline images, and add emojis to your message.

You'll also see several prompts:

  • A delivered ✓ and read icon ✓✓ for each message sent by agents to shoppers.
  • A notification below the latest sent/received message that the shopper is currently typing a new message.
  • The Last seen on Chat information as a 🟢 or 🟠 icon over the shopper's avatar.
Web Acceleration tools (Content Delivery Networks (CDNs)), lazy loading, caching, precaching, and user speed optimization) can cause harm to the Chat widget - it's crucial to avoid caching the Chat widget and any personal data on the webpage, including Shopify variables (window.SHOPIFY_CUSTOMER_ID, window.SHOPIFY_CUSTOMER_EMAIL).


Steps

Set up the basics

Here you can select your Chat's title which is what your customers see at the top of your Chat widget when it's open, as well as the language of the Chat (you can add more of them with the + Add More Languages button on the right.

Then, you can select a platform type:

  • Ecommerce platforms (Shopify, Magento, and BigCommerce)
  • Any other website

The first group has to specify the store right away to enable 1-click installation and use Automate features, while the second can do so at a later date.

Finally, you can choose to make your Chat live or in offline mode.

Customize your Chat

Here you can choose the colors of your Chat widget and the look of your launcher.

Automate

Here you can also choose to connect a store to turn on features like Order Management and Article Recommendation - all part of our Automate add-on

Install and launch 

There are 2 installation methods to choose from: 

  • 1-click installation for Shopify is for regular Shopify users
  • Manual installation is for non-Shopify stores, Shopify Headless stores, and for installing Chat on specific pages of your Shopify (or any other) store 

1-click installation

1. Select 1-click installation for Shopify.

2. Click the Install button.

If you'd like to only show or hide the Chat on specific pages, click on the arrow to the right to open the dropdown where you can specify the pages under Show On Every Page.

This doesn't apply to Shopify Checkout Pages.


Manual installation

1. Select Manual installation.

2. Click the Install Manually button and See Instructions on the pop-up.

3. Click the arrow to the right to expand the manual installation instructions.

4. Select your site type from the options provided - Shopify Website, Any Other Website, and Google Tag Manager.

5. Follow the instructions displayed under the chosen tab.

By copying the code to your Shopify theme.liquid files, the Chat will be shown on all pages. If you only want to show it on specific pages, copy the Chat code only onto the pages that you want the widget to appear on or follow the steps for 1-click installation where you can choose on which URLs you wish to have the Chat shown.

If you're using Gorgias Chat on an iOS webview, make sure to add about:srcdoc to your webview's originWhitelist.


Google Tag Manager installation

When the Chat is added using the Google Tag Manager, it won't display on the website to someone who has an ad blocker switched on.


1. Go to Settings → Channels -> Chat -> your Chat integration -> Installation -> Google Tag Manager.

2. You'll find your Chat App ID in step 4 - please copy it.

3. Go to your Google Tag Manager, go to Tags in the menu, then click the New button to create a new tag.

4. Search for Gorgias Chat and select it.

5. Enter your Gorgias Chat App ID from step 2.

6. Select All Pages - Page view in the Trigger section, then Publish.

If the Chat widget was installed manually and the tag was added to GTM, it's recommended that the installation code is pasted directly into HTML.

Due to Google Tag Manager limitations, you might have to whitelist the code in your Content-Security-Policy and, if you have the Content-Security-Policy header configured, you'll need to whitelist Gorgias as well.

Installation Monitoring

To make sure your Chat is installed correctly, we're checking whether we've seen the bundle be loaded on your website in the past 72 hours.

If you've just installed the Chat, you need to go to your website and refresh to make the status change. If you've uninstalled your Chat, you'll see the change in status on the list after 72 hours. 

If we don't see the Chat on your website, we'll let you know by displaying: 

  • the Not Installed status in the Chat list
  • a banner on the Installation page. 
Since we're relying on visitors' traffic to know if your Chat is installed, it's possible that we displayed Not Installed when there was simply no traffic on the website in the last 72h.


Content Policies

In case you have strict content security policies and need to whitelist URLs that the Gorgias Chat widget uses to load to allow it to work, you can try whitelisting the following:

11- https://config.gorgias.chat2- https://assets.gorgias.chat3- https://config.gorgias.io4- https://us-east1-898b.gorgias.chat5- https://storage.googleapis.com6- https://api.gorgias.work

And, for Automate subscribers, an additional one:

11- https://api.gorgias.work

Was this article helpful?
Yes
No