Customize Chat with HTML 101

These suggestions aren't official features of our Chat widget, but suggestions on further customization, so our support for these types of customization is limited. We recommend that these steps be performed by someone with a technical background.

These articles are only meant to be a reference point for you and your team - following these instructions will require knowledge of HTML, JavaScript, and Shopify Liquid (for Shopify).

Stores

Shopify

Access theme.liquid files in Shopify

This method is used to customize Chat on a global level (all pages).

Every code snippet used to customize the widget should be placed just below the Chat installation script between the <body> and </body> tags.

To find the script and place any custom code, you'll need to find your Shopify store's theme.liquid files.

1. From the Shopify admin, go to Online Store → Themes.

2. Click the actions icon, then Edit code.3. In Layout, click theme.liquid.

Customize specific pages in Shopify

This method is used when only customizing specific pages of the Chat.

1. In Shopify, go to Home -> Online Store.

2. Select Pages -> the page you want to edit.

3. Copy the code from the article.

4. Under Content, click on the <> icon (it says Show HTML on hover) - this will switch your view from text only to HTML view.

5. Paste the code into the HTML view.

6. (Optional) Click the <> icon to go back to text view and edit the text.

7. Click Save.

BigCommerce

Instructions in this category are geared towards Shopify users so, if you want to adapt them for BigCommerce, you'll need to adjust the script slightly.

BigCommerce has a Manage Code feature that only allows you to place <script> codes - you'll only be able to place the default Chat code and a few other customization codes there.

For any non-script codes, like the one that changes the z-index in the style, you have to go into their Theme Manager → Edit Theme and find the home.html file.

Using the Gorgias Chat JavaScript API

The Gorgias Chat Javascript API helps you configure and customize your Chat in many advanced ways - it's available in Javascript from the GorgiasChat object as a member of the Window Object.

Before you call some of the methods, you need to make sure the Chat is fully initialized - this is done with the GorgiasChat.init() method.

Some of the scripts need to be implemented without the Gorgias wrapper.

New Method (recommended)

1var initGorgiasChatPromise = (window.GorgiasChat) ? window.GorgiasChat.init() : new Promise(function (resolve) { window.addEventListener('gorgias-widget-loaded', function () { resolve();})});
2
3initGorgiasChatPromise.then(async () => {
4    // custom code
5})

Old Method (deprecated)

Make sure that Gorgias chat code snippet is called before your advanced code:

1<script id="gorgias-chat-widget-install-v3" src="https://config.gorgias.chat/bundle-loader/XXXXXXXXXXXXXXXXXXXXXXXXXX"></script>
2
3
4Advanced code:
5<script>
6GorgiasChat.init().then(function() {
7    // Use GorgiasChat API here, now that the chat is fully initialized.
8})
9</script>
10

You must never call GorgiasChat without the init().then(...) callback in an HTML script tag <script></script> because your script code might run before the Chat is downloaded and initialized.

Uncaught ReferenceError: GorgiasChat is not defined

This console error means that the Gorgias Chat code snippet is either missing in the page, or called after the custom script.

Also verify that you're using the Gorgias Chat bundle loader version 3 by checking that you have gorgias-chat-widget-install-v3 in the script.

Uninstalling and reinstalling the Chat from Shopify using the 1-click installation can cause this - review the theme files scripts order.

Customize Chat with HTML 101Updated a month ago