Gorgias logo
Gorgias logo

All articles

Set up ChatUpdated 18 days ago

Chat allows customers to get in touch with your business without needing to send an email or wait for a reply. You can choose to have chat available in live mode (where agents and customer talk in real time) or offline mode (where customers leave their message to be replied to later).



If you are experiencing issues with content policy, you can try whitelisting the following URLs that Gorgias chat widget uses to Load:

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

Part 1 - Set up Chat basics

Steps

  1. Go to Settings > Chat
  2. Click Add Chat
  3. Enter a Chat title
  4. Select a language
  5. Select your platform type
  6. Select a store to connect (optional)
    This is required if you wish to use Automate features and/or one-click installation method for Shopify.
    There can only be one chat installed per Shopify store.
  7. Select how you'd like to connect with customers
    Allow live chat messages is best for businesses with agents who can manage incoming chat tickets in real time.
    Allow only contact form messages is best for businesses that do not have agents managing incoming chat tickets in real time but still wish to have chat available.
  8. Click Create & Customize
  9. Select main and conversation colours
    These can be selected from the default options or added as a custom hex code
  10. Select a launcher
    This is the icon that will appear on your site.
    If you selected icon and label, enter a launcher label 
  11. Click Next
  12. Continue with installation via 1-click installation for Shopify or manual installation


Part 2 - Install and launch Chat 

There are 2 installation method to choose from: 

  • 1-click installation for Shopify is best for Shopify merchants who wish to install chat on their storefront/site.
  • Manual installation is best for non-shopify merchants or merchants wishing to install chat in a non-ecommerce website


1-click installation for Shopify

Steps

  1. Select 1-click installation for Shopify
  2. Click Install Chat
  3. Continue to Part 3 - Configure Chat preferences


Manual installation

Steps

  1. Select manual installation
  2. Click Install Manually
    A prompt will appear
  3. Click See Instructions
  4. Click the arrow to expand the manual installation instructions
  5. Select your site type from the options provided
  6. Follow the instructions displayed



Part 3 - Configure Chat preferences

Steps to hide or show the chat on specific pages or URLs

Navigate to Settings-> Channels-> Chat-> Installation tab, then open the 1-click installation dropdown to start configuring your chat's visibility. (This is only available for Shopify Stores).


By default we will install your chat on all pages but you will be able to set up multiple conditions to achieve the desired visibility of the chat on your store if you wish to only show it on specific pages or if you wish to hide it on specific pages.

You can update these conditions at any point and it does not require you to uninstall your chat.


Keep in mind that this does not apply to the Shopify Checkout Pages.



From here you are free to explore the rest of the tabs in order to customize your new chat integration in accordance with your wishes and your branding! Feel free to explore 'Campaigns', 'Appearance', 'Preferences' and 'Automation'. More on these later in this guide!



By copying the code to your Shopify theme.liquid files, the chat will be shown on all web pages. If you don't want it showing everywhere, copy the chat code only onto the pages that you want the widget to appear on, or ultimately, follow the steps for 1-click installation where you can choose on which URLs you wish to have the chat shown.



If you are not installing on a Shopify store, please remove the one-click Shopify installation, and then click the arrow next to the 'Custom installation' section at the bottom to expand the custom instructions. Here you can grab the installation code and paste it manually into your store website pages where you want chat to show up.


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

After Installation, for Chat Campaigns (first aforementioned tab) please check out this guide for details.

The next tab is Appearance - we recommend checking out our detailed guide on all the options.

Next up, Preferences! Here you can adjust your Email Prompt, adjust the behavior when your chat is live, choose to hide your chat outside of your business hours or on mobile preview, configure your Auto-Responder (with special attention to Dynamic wait time), and finally pick the associated email integration with your chat. From here, you are also able to hide your chat without uninstalling it.

If the chat settings are set to show the chat as live when agents are available, note that the chat will stay live for up to 12 hours if an agent forgets to toggle off their availability status and just closes the Gorgias tab.

Furthermore, if you adjust the chat live settings for the chat to be live on your website when agents are available, this will take into account any available agent, regardless of their role. For example, even an observer agent that sets themselves as available will cause the chat to go live.



This email address will be used to send chat transcripts when needed and CSAT.

Once again, never forget to save your changes at the end!

  • Now we arrive to the Automation tab. This is where the true power of the Gorgias chat widget resides, as per our motto, 'Automate everything'! Here you can decide if you want to enable Order Management on your chat, as well as Article Recommendation. More on both in their respective linked guides.
    The preview of what both will look like on your chat is available to you on the right side of the screen.
    Again, once satisfied with your setup, please save your changes.

All of your chat-related automations can be found there:


Congrats on your brand new Gorgias chat integration! 


Setup instructions for Google Tag Manager

First, let's look into your Gorgias dashboard and find your Chat App ID. Please follow the steps below:

  1. Go to SettingsChat.
  2. Pick the integration that you want to connect and then go to InstallationCustom installationGoogle Tag Manager.
  3. You'll find your Chat App ID on step 4. Please copy it.
  4. Go to your Google Tag Manager, click 'Tags' on the menu.

  5. Click 'New' to create a new tag.

  6. Search for 'Gorgias Chat' and select it.

  7. Enter your Gorgias Chat App ID (the one we grabbed in step 3 above).

  8. Select 'All Pages - Page view' in the Trigger section.

  9. Save and publish! You're done!


  • If the chat widget was installed manually and the tag was added to GTM, it is recommended that the installation code is pasted directly into HTML.
  • Due to Google Tag Manager limitations, you might have to whitelist the code in you Content-Security-Policy.
  • When chat is added to a site using Google Tag Manager, it won't display if someone has ad blocker switched on.

*Note: If you have the Content-Security-Policy header configured you will need to whitelist Gorgias as well.



Installation Monitoring

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

If we do not see the chat on your website we will let you know by displaying: 

  • The Not installed status in the chat list.
  • With a banner on the installation page. 

Note that if you have just installed the chat you need to go to your website and refresh to make the status change & if you have uninstalled your chat you'll see the change in status on the list after 72 hours. 

Finally, since we are relying on visitors' traffic to know if your chat is installed it is possible that we displayed not installed when it was simply that you received no traffic in the last 72 hours.


Chat availability

The chat status will always depend on your business hours settings (under SettingsBusiness Hours). Outside of business hours, the chat will show in offline mode. During your business hours, the chat will show in online mode.



*Note: No one, not even the Account Owner, can change the availability status of other agents. This can only be done by the agent in question.


And a quick note regarding agents' profile images:

  • Even if no agents are set as available for chat during business hours, the chat will still be shown in online mode, but their profile picture will have little orange circles. If agents are available, their profile images will be displayed with little green circles.
  • In case that you have agents available for chat outside business hours, the chat widget will still be displayed in offline mode and the agent's profile picture will always be displayed with orange circles (regardless of their availability).


A note regarding setting a single picture for the whole team:

  • For technical reasons, this is only available when updating an existing Chat integration and not when creating a new Chat integration. If you want to set a single picture for the whole team on a new Chat integration, please create the Chat without a picture first, and then go back to the Chat settings Appearance tab to upload a picture and enable this setting.


Setting yourself as available for chat

You can determine when you're available to chat with customers or not. Please note that this will not affect the overall availability of the chat - this is changed by setting up your business hours.

To set your availability, click on your name at the bottom right, and use the available for chat toggle.



There are 3 ways an agent can appear as unavailable for chat:

  • If the agent marks themselves as not available for chat manually using the toggle described above.
  • If the agent has closed their Gorgias tab.
  • If the agent hasn't been active for more than 10 minutes.

When an agent in Gorgias is replying to a chat ticket and the customer still has the chat widget open on their end, the customer will be able to see that the agent is typing their message. However, the agent will not see when a customer is typing a message or if they still have the chat widget open.


If the customer closes the chat widget and misses your message, we will send them the missed messages via email. This event will also be displayed on the ticket in Gorgias, as shown on the screenshot below. Moreover, clicking on the event will highlight the exact messages that were sent in the email.


Auto-responder for Chat

You can set automatic responses that will be sent to your customers outside of your business hours. This is a great way to let your customers know when they can receive a response from your agents. The Auto-responder can be managed in the Preferences tab of your Chat settings.

The auto-responder is not related to agent availability, but will instead behave differently depending on whether your customers are within or outside your business hours.


During business hours auto-response

If a new ticket is created by a customer message and no one answers after 30 seconds, an automatic reply that you select will be sent to the customer:


If a new ticket is created by a customer message, an automatic reply will be instantaneously sent indicating when agents will be available (based on your business hours).


All messages are translated into the language used by your Chat, which you can now configure in the Appearance tab of the Chat settings, as mentioned above.


*Note: The auto-responder will only work if the customers are logged into their account on your website. If the customer is not logged into your website, they will receive just the email prompt message.


Email prompt

The email prompt feature will allow you to require your customers to enter their email before starting chat. This helps prevent tickets where your customers are leaving messages in the chat, but are then not reachable for a follow-up. It can be configured in the Preferences tab of your Chat settings.

There are two options for the email prompt:

  • Optional: the default option. Customers can send messages, but if they are not associated with an email address, they will be prompted to enter theirs.
  • Always required: customers cannot send a chat message without entering their email address first (except if their email address is already known).

When your shoppers start a chat, they will get the email prompt that looks just like this:

Email prompt limitations

  • The email prompt feature cannot be disabled manually. The time it takes for it to trigger also can not be changed, at least for now.
  • If you are adding your Gorgias user email to the email prompt, it won't be picked up by our system. Please see this article for more details.
  • If your customer doesn't get back to you on your chat ticket after 1 hour, our system will automatically send them the transcript of the chat up to that point.


Change email prompt message

  1. Click on Settings then Chat



  2. Click on Language


  3. In the right corner click Customize


  4. Scroll down to Email capture, you can change messages or even translate them to another language




Chat view and section

Apart from being able to check your chat tickets in the Chats view, these will also appear in the Live Communication section on the left-hand sidebar, just above the views section. This section will appear only if you set as available.

If more than 6 conversations are open (unassigned or assigned to a current agent), we only display 6 based on when the last message was sent within a chat ticket. The newest chats will be at the top of the list.


Chat assignment setting

You can use the Chat assignment setting to remove an assigned agent from a ticket if they are unavailable. For more information take a look at this article.

If a customer responds to a chat ticket after 3 days of inactivity, this action will create a new ticket. This way Gorgias helps you separate conversations about different topics.


Chat and caching

Web Acceleration tools (Content Delivery Networks (CDNs), Lazy loading, caching, precaching, and user speed optimization) can cause harm to the chat widget. It is crucial to avoid caching the chat widget and any personal data on the webpage, including Shopify variables such as `window.SHOPIFY_CUSTOMER_ID` and `window.SHOPIFY_CUSTOMER_EMAIL`. Be mindful of these factors when utilizing Web Acceleration techniques to optimize user speed on your website.


More neat Gorgias chat features!

Now that you're ready to answer your chat tickets, here are some additional cool things that you can add to your replies to spice them up!

  • We've added the ability for you to send messages with rich text formatting and embedded hyperlinks when replying to a chat ticket in Gorgias. The same goes for chat campaigns, of course.
  • When viewing a chat ticket, you will see additional buttons below your text input field that will let you insert bold, underlined, and italic text, as well as the ability to create hyperlinks, insert inline images and add emojis to your message.
    Here's an example:


You will also see the chatter's activity in real-time during the conversation! Here's a list of benefits that you will enjoy from now on:

  • We added a delivered ✓ and read icon ✓✓ for each message sent by agents to shoppers.
  • Agents will see a prompt below the latest sent/received message that will notify them that the shopper is currently typing a new message.
  • We moved the 'Last seen on chat' information from the Customer panel (right of the screen) to the ticket conversation as a clear 🟢 or 🟠 icon over the shopper's avatar, as shown below:



Apply for the Masterclass

You can apply for the Chat Masterclass here




Any follow-up questions or concerns perhaps? Our Support Team is available to you 24/7, rest assured, both via email at [email protected] or via live chat.


Last reviewed Wed, 1 Nov 23 by Daniela Sherif and Nikola Stevanovic

Was this article helpful?
Yes
No