Just like with your help center, the main purpose of the HelpCenter.io widget is to act as a first line of customer support, so people won't have to reach out to your support team with the same questions over and over again.

This is why, here we will see how you can integrate the HelpCenter.io widget with the tawk.to widget so the live chat shows only when your user has been unable to find the information they need in your help center.

Install the tawk.to widget on your website

If you've already done this, you can move onto the next step. Otherwise, we should start by setting up the tawk.to widget on your website or app.

Once you've signed up with tawk.to you should be inside your dashboard, go to Administration -> Channels -> Chat Widget. Here you will find your very own JS snippet which should get placed right before the closing </body> tag on all pages where you would like the tawk.to chat widget active.

Follow the instructions in the help center of tawk.to if you need more information on how to install their chat widget.

Make the tawk.to widget invisible by default

Once you've got the tawk.to chat widget up and running on your website, it is time for us to hide it.

Yes, we would make it invisible to everybody. In the end, we would like people to open it only when we haven't provided the information they need or in case we decide to reach out to them.

To hide the tawk.to widget, we have to copy and paste the following piece of code right after the tawk.to JS snippet that we've got installed in the previous step:

window.Tawk_API.onLoad = function(){
    window.Tawk_API.hideWidget();
};

Don't worry, we will unhide it later when setting up the HelpCenter.io widget.

Install the HelpCenter.io widget on your website

Now that we have the tawk.to widget properly set up but hidden, it is time to install the HelpCenter.io widget.

Go to your HelpCenter.io dashboard, choose the appropriate help center and then navigate to Settings -> Widget.

If you still haven't enabled the widget for your help center, go ahead and click the button to enable it.

You will be presented with the widget options, together with the installation script at the top of the page.

If the installation script is hidden, click on the "Show installation script" button on the top right corner of the page to show it.

Here's the interesting part. You should modify a bit the JS that you see so the HelpCenter.io widget would open up the tawk.to widget when somebody clicks on the "I can't find what I'm looking for" button.

The default HelpCenter.io widget code looks similar to 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'
    };
    document.body.appendChild(s);
})();
</script>
<!-- End HelpCenter.io smart widget code -->

where 'ab12c3' will be specific to your help center.

What we need to do is add one more line after app_id: 'ab12c3'. Start with a comma after the closing single quote on the app_id line, and place the following piece on the next line:

onContactsRequest: function(){if(window.Tawk_API){window.Tawk_API.showWidget();window.Tawk_API.maximize();window.hcWidget.hideAll();}else{console.error('Unable to find tawk.to widget.');}}

This instructs the HelpCenter.io widget to show and open up your tawk.to chat widget when a user is unable to find enough information in your help center to solve their problem by themselves. It will also hide the HelpCenter.io widget so it will not overlap with your messenger.

The final variant of your HelpCenter.io widget would look something 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(){if(window.Tawk_API){window.Tawk_API.showWidget();window.Tawk_API.maximize();window.hcWidget.hideAll();}else{console.error('Unable to find tawk.to widget.');}}
    };
    document.body.appendChild(s);
})();
</script>
<!-- End HelpCenter.io smart widget code -->

where the 'ab12c3' text will be specific to your help center.

Place the JS snippet that you've got right before the closing </body> tag of your website or web app and that is all.

Now that you've done this, the HelpCenter.io widget will show first, giving your users helpful information from your help center and a chance to solve their problems alone, unless there's something they couldn't find.

For those cases, they will have the option to activate your tawk.to chat widget and easily reach out to your support team with their question, so you know where to improve next.

Listen to your customers when they reach out, and extend your knowledge base every time they ask something new. Doing this continuously should make up for fewer and fewer repetitive customer support requests.