HTML snippets for Chat customization

Disable auto open Chat

The Chat window will automatically open for returning customers if they leave the Chat window open and their last visit was less than 4 days ago (except on mobile). You can prevent this using the following method:. Here's what the wrapper looks like,

Disable automatic font color change

The Chat will adjust font and icon color based on your configuration under the Appearance tab to improve accessibility and readability. Font and icon color will be dark over light background colors, and light over dark background colors, based on the

Create an "Open Chat" link on your page

If you want to add a link on your page to open the Chat when clicked, use the code below:. Likewise, you can also have a link to close the Chat:. 1. Select Pages → the page where you want to add the link (like the Contact Us page). 2. Add the code. 3

Hyperlink your Help Center in Chat auto-reply

If you want to include a hyperlink to your Help Center in an auto-reply on your Chat, use the following method:.

Change the Chat position on different pages

Set custom business hours

The following method can be used to set custom business hours for your Chat:

Adjust Chat default text values

If you want to display the current text values, run the following in the console:. It's possible to adjust the hardcoded text values used by the Chat both in the UI itself (under Settings -> Chat -> your Chat integration -> Language -> Customize) and

Toggle the display of translation keys/text values in Chat

If you want to display the translation keys in the Chat instead of the text values, run the following in the console:. In a similar fashion, you can go back to text values with the following code:

Add custom CSS

Chat cannot be installed on your store using Quick installation for Shopify method if you want to use Advanced Chat Customization. Quick install re-injects chat in its default state, removing any visual customization. If you want to customize the vis

Replace the Chat widget button

You can replace our Chat widget button with your own by providing some custom code - the following custom script would replace the original widget button with a custom button element.

Replace the background gradient

The following custom script should be added to your theme.liquid above the tag if you want the Chat design to be in one color only, without the gradient. Replace #xxxxx in the script with your HEX color code.

Reduce sub-header text size and spacing

Open the Chat automatically

You can make the Chat open automatically on page load by adding the gs_open_chat parameter to your URL (notice the gs_ which stands for Gorgias). The resulting store URL is now www.my-store.com?gs_open_chat.

Pre-fill the user message

You can direct your customers to a URL where the Chat will have a pre-filled message by using the query parameter gs_chat_message=mymessage where mymessage is your custom message. The message must be URL encoded - the message "I want information on p

Check if the Chat is open or closed

You can use the following method to determine whether the Chat is in an open or closed state:

Check whether the current time is in business hours

You can use the following method to determine whether the Chat business hours (as defined in the helpdesk) are displayed correctly - this variable is only trustworthy after Chat initialization:

Set the current page of the Chat

You can change the current page of the Chat with this method:

Subscribe to Chat events

Sometimes it's useful to do something specific when the Chat widget is open or closed - you can use the example below to do that. Gorgias Chat supports the following events:. It is also possible to deregister an event listener using the GorgiasChat.o

Programmatically send a message

To send a message from the user via the Chat programmatically, you can use this method with a string parameter:. If the Chat is still closed, the message will wait for the user to open it before sending. If the Chat always remains closed, the message

Programmatically capture an email

You may want to set up the shopper's email programmatically - to do so, we exposed the captureUserEmail method that allows you to change the user email associated to the current Chat conversation.

Programmatically capture the Shopify cart

You may want to link a specific cart with the current Chat user - to do so, we expose the captureShopifyCart method that allows you to provide the Shopify Cart of the Shopify user currently using the Chat. The cart details will be displayed in the si

Disable Segment

To disable Segment (a script used to gather analytics), use the following script:.

Remove the Chat based on country code

If you only work with certain countries you might want to only handle Chat messages coming from those countries. The code below hides the Chat for ALL countries except United States and Mexico:. 1. Go to your Shopify home screen. 2. Click on Online S

Remove the Chat on specific page(s) of the store

This suggestion isn't an official feature of our Chat widget, so our support for it is limited - we recommend that it be implemented by someone with a technical background.

Stop Chat from conflicting with other widgets

If your Chat widget is conflicting or hidden behind some other elements on the page (the accessibility widget, rewards widget, etc.), changing the z-index should overlay the Chat on top of any other element. To do this, add this code to your site:. I