Integrate the widget with Gorgias Chat

Cut down on live chat requests by showing the widget first and opening Gorgias Chat only when a visitor can't find what they need. Visitors get instant answers from your help center, and your team only hears the questions your articles don't cover yet.

Step 1: Install Gorgias Chat

If Gorgias Chat already runs on your website, skip to the next step. Otherwise, install it by following the instructions in Gorgias's help center.

Step 2: Hide the Gorgias Chat launcher

Visitors should only see the chat once they've asked for help, so hide the Gorgias chat bubble and let the widget open the chat when it's needed. Add this script right before the closing </body> tag on every page where Gorgias Chat is installed:

<script>
    GorgiasChat.init().then(async function() {
        var chatElem = document.getElementById("gorgias-chat-container")
        chatElem.style.display = "none";
        GorgiasChat.on('widget:closed', function(data) {
            chatElem.style.display = "none";
        });
    });
</script>

The chat bubble stays hidden, and because the widget shows the chat when it's needed, the script hides it again every time the chat is closed. That way you don't end up with two buttons on top of each other.

Step 3: Add the widget and connect it to Gorgias Chat

1. In your HelpCenter.io dashboard, click the gear icon in the left menu, then Embeddables.

2. On the Widget tab, click Copy on the Installation card.

The code you copied looks like this, with your own widget ID in place of ab12c3:

<!-- HelpCenter.io smart widget code -->
<script type="text/javascript">(function(){
    var s = document.createElement('script');
    s.src = "//helpcenter.io/js/init.js";
    s.async = true;
    window.hcOptions = {
        app_id: 'ab12c3'
    };
    document.body.appendChild(s);
})();
</script>
<!-- End HelpCenter.io smart widget code -->

Add a comma after app_id: 'ab12c3', and on the next line add an onContactsRequest function that opens Gorgias Chat:

onContactsRequest: function(){GorgiasChat.open(); document.getElementById("gorgias-chat-container").style.display="";}

The finished code looks like this:

<!-- HelpCenter.io smart widget code -->
<script type="text/javascript">(function(){
    var s = document.createElement('script');
    s.src = "//helpcenter.io/js/init.js";
    s.async = true;
    window.hcOptions = {
        app_id: 'ab12c3',
        onContactsRequest: function(){GorgiasChat.open(); document.getElementById("gorgias-chat-container").style.display="";}
    };
    document.body.appendChild(s);
})();
</script>
<!-- End HelpCenter.io smart widget code -->

Paste it right before the closing </body> tag of your website or web app.

How it works

Visitors see the widget first and can search your help center or read an article to solve the problem themselves. When they ask to contact you from the widget, for example by clicking I can't find what I'm looking for, the widget calls your onContactsRequest function instead of showing its own contact form, and Gorgias Chat opens.

Pay attention to what people ask in the chat, and add an article whenever a new question comes up. Over time, fewer visitors need to reach out with the same question.

Good to know

• The widget stays open when the chat opens. To close it at the same time, add window.hcWidget.hide(); inside your onContactsRequest function. See Widget JavaScript API on the developer portal.

• Gorgias documents more ways to control its chat from JavaScript in its guide to advanced customization.

• Not comfortable editing your website's code? Ask a developer, or contact us: we may be able to help.

Related articles

• Add the widget to your website

• Integrations overview

• Handle contact requests yourself on the developer portal

• Widget JavaScript API on the developer portal