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). Every code snippet used to customize the widget should be placed

<div class="note-callout">These suggestions aren&apos;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.</div><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; margin-block: 0px 24px; margin-inline: 0px; scroll-margin-top: 84px; font-family: var(--ghc-primary-font-family),sans-serif; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; font-size: 16px; line-height: 24px;"> These articles are only meant to be a reference point for you and your team - following these instructions will require knowledge of&#xA0;HTML, JavaScript, and Shopify Liquid (for Shopify).<hr><h2 id="stores"> Stores</h2><h3 id="shopify">Shopify</h3><h4 id="access-themeliquid-files-in-shopify">Access theme.liquid files in Shopify </h4><div class="note-callout">This method is used to customize Chat on a global level (all pages).</div><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; margin-block: 0px 24px; margin-inline: 0px; scroll-margin-top: 84px; font-family: var(--ghc-primary-font-family),sans-serif; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; font-size: 16px; line-height: 24px;"> Every code snippet used to customize the widget should be placed just below the Chat installation script between the &lt;body&gt;&#xA0;and&#xA0;&lt;/body&gt;&#xA0;tags.&#xA0;<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; margin-block: 0px 24px; margin-inline: 0px; scroll-margin-top: 84px; font-family: var(--ghc-primary-font-family),sans-serif; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; font-size: 16px; line-height: 24px;">To find the script and place any custom code, you&apos;ll need to <a href="https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/edit-theme-code#before-you-customize-your-theme" rel="noopener noreferrer" target="_blank">find your Shopify store&apos;s theme.liquid&#xA0;files</a>.1. From the Shopify admin, go to Online Store &#x2192;&#xA0;Themes.<img src="https://attachments.gorgias.help/uploads.gorgias.io/0bgJ1Q6QZ2vXKOMk/Screenshot_2023-08-08_at_12.11.53-2735f57e-6c40-4b3c-a763-cd241129c3e5.png" style="width: 238px;" class="fr-fic fr-dib">2. Click the actions icon, then Edit code.<img src="https://attachments.gorgias.help/uploads.gorgias.io/0bgJ1Q6QZ2vXKOMk/Screenshot_2023-08-08_at_12.12.32-3f65fd04-b081-4a49-8c23-66efe4056c5e.png" style="width: 236px;" class="fr-fic fr-dib">3. In Layout, click&#xA0;theme.liquid.<img src="https://attachments.gorgias.help/uploads.gorgias.io/0bgJ1Q6QZ2vXKOMk/Screenshot_2023-08-08_at_12.13.41-f3dfe12a-f0fe-40b3-8bbb-17908b7be36c.png" style="width: 233px;" class="fr-fic fr-dib"> <h4 id="customize-specific-pages-in-shopify">Customize specific pages in Shopify</h4><div class="note-callout">This method is used when only customizing specific pages of the Chat.</div> 1. In Shopify, go to Home&#xA0;-&gt;&#xA0;Online Store.2. Select&#xA0;Pages -&gt; the page you want to edit.3.&#xA0;Copy the code from the article.4. Under Content, click on the &lt;&gt; 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 &lt;&gt; icon to go back to text view and edit the text.7. Click Save. <h3 id="bigcommerce">BigCommerce</h3>Instructions in this category are geared towards Shopify users so, if you want to adapt them for BigCommerce, you&apos;ll need to adjust the script slightly.BigCommerce has a Manage Code feature that only allows you to place &lt;script&gt; codes - you&apos;ll only be able to place the default Chat code and a few other customization codes there.&#xA0;For any non-script codes, like the one that changes the z-index in the style, you have to go into their Theme Manager &#x2192; Edit Theme&#xA0;and find the home.html file.<hr> <h2 id="using-the-gorgias-chat-javascript-api">Using the Gorgias Chat JavaScript API</h2><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; margin-block: 0px 24px; margin-inline: 0px; scroll-margin-top: 84px; font-family: var(--ghc-primary-font-family),sans-serif; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; font-size: 16px; line-height: 24px;">The Gorgias Chat Javascript API helps you configure and customize your Chat in many advanced ways - it&apos;s available in Javascript from the&#xA0;GorgiasChat&#xA0;object as a member of the <a href="https://www.w3schools.com/js/js_window.asp" style="box-sizing: border-box; background-color: transparent; color: rgb(0, 117, 255); text-decoration: none; cursor: pointer; transition: color 200ms linear 0s;" target="_blank">Window Object</a>.<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; margin-block: 0px 24px; margin-inline: 0px; scroll-margin-top: 84px; font-family: var(--ghc-primary-font-family),sans-serif; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; font-size: 16px; line-height: 24px;">Before you call some of the methods, you need to make sure the Chat is fully initialized - this is done with the&#xA0;GorgiasChat.init()&#xA0;method.<div class="note-callout">Some of the scripts need to be implemented without the Gorgias wrapper.</div> <h3 id="new-method-recommended">New Method (recommended)</h3><pre>var initGorgiasChatPromise = (window.GorgiasChat) ? window.GorgiasChat.init() : new Promise(function (resolve) { window.addEventListener(&apos;gorgias-widget-loaded&apos;, function () { resolve();})}); 
initGorgiasChatPromise.then(async () =&gt; {
&#xA0; &#xA0; // custom code
})</pre> <h3 id="old-method-deprecated">Old Method (deprecated)</h3>Make sure that Gorgias chat code snippet is called before your advanced code:<pre>&lt;script id=&quot;gorgias-chat-widget-install-v3&quot; src=&quot;https://config.gorgias.chat/bundle-loader/XXXXXXXXXXXXXXXXXXXXXXXXXX&quot;&gt;&lt;/script&gt;


Advanced code:<pre>
</pre><pre>&lt;script&gt; GorgiasChat.init().then(function() {
&#xA0; &#xA0; // Use GorgiasChat API here, now that the chat is fully initialized.
})
&lt;/script&gt;</pre><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1rem; margin-block: 0px 24px; margin-inline: 0px; scroll-margin-top: 84px; font-family: var(--ghc-primary-font-family),sans-serif; -webkit-font-smoothing: antialiased; font-weight: 400; font-style: normal; font-size: 16px; line-height: 24px;"> </pre><div id>You must never call GorgiasChat without the init().then(...) callback in an HTML script tag &lt;script&gt;&lt;/script&gt; because your script code might run before the Chat is downloaded and initialized.<hr><h2 id="uncaught-referenceerror-gorgiaschat-is-not-defined"> Uncaught ReferenceError: GorgiasChat is not defined</h2>This console error means that the Gorgias Chat code snippet is either missing in the page, or called <a href="https://gorgias-help-center.gorgias.help/en-US/advanced-customization-new-chat-81792">after the custom script</a>.&#xA0;Also verify that you&apos;re using the Gorgias Chat bundle loader version 3 by checking that you have&#xA0;gorgias-chat-widget-install-v3&#xA0;in the script.Uninstalling and reinstalling the Chat using the Quick installation for Shopify can cause this problem. Review the theme files scripts order.</div>

Customize Chat with HTML 101

You can configure the Chat behavior with URL query parameters to share links with your customers - when a customer clicks the link, the specified page will load and the Chat will perform the desired behavior. You can also use several of these paramet

You can configure the Chat behavior with URL query parameters to share links with your customers - when a customer clicks the link, the specified page will load and the Chat will perform the desired behavior.You can also use several of these parameters simultaneously: If you, for example, want to open the Chat automatically, and also set the default page as conversation, and pre-fill the user message with &quot;Hello&quot;, you can combine all the parameters in a single URL by separating them with an &amp;.So the URL would be&#xA0;www.my-store.com?gs_open_chat&amp;gs_chat_page=conversation&amp;gs_chat_message=Hello.

Using URL query parameters

To only display the chat after a certain amount of time, use the following method:

To only display the chat after a certain amount of time, use the following method:<pre id="isPasted">&lt;script&gt;
var initGorgiasChatPromise = (window.GorgiasChat) ? window.GorgiasChat.init() : new Promise(function (resolve) { window.addEventListener(&apos;gorgias-widget-loaded&apos;, function () { resolve();})});

initGorgiasChatPromise.then(async function() {
 &#xA0; &#xA0;var chatElem = document.getElementById(&quot;gorgias-chat-container&quot;)
 &#xA0; &#xA0;chatElem.style.display = &quot;none&quot;;

 &#xA0; &#xA0;function sleep(seconds) {
 &#xA0; &#xA0;return new Promise(resolve =&gt; setTimeout(resolve, seconds * 1000));
 &#xA0; &#xA0;}

 &#xA0; &#xA0;await sleep(5) // CHANGE THIS VALUE TO THE NUMBER OF SECONDS TO WAIT BEFORE SHOWING THE CHAT BUBBLE 
 &#xA0; &#xA0;chatElem.style.display = &quot;&quot;;
})
&lt;/script&gt;</pre>

Display the chat widget after some time spent on the website

HTML snippets for Chat customization

Please feel free to reach out to our Support Team via email anytime!

Main website

What's new

Webinars

Academy

Community

Gorgias