# Integrate the HelpCenter.io smart widget with the tawk.to chat widget

_Category: Integrations_

Just like with your help center, the main purpose of the [HelpCenter.io](http://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](http://HelpCenter.io) widget with the [tawk.to](http://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**](http://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](http://tawk.to) widget on your website or app.

Once you've signed up with [tawk.to](http://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](http://tawk.to) chat widget active.

[![https://helpcenter-io.s3.amazonaws.com/uploads/self/UizwAN8Ior3WeNbSf7PXj0why2ZxR7eo2uIawlMq.pngpng](https://helpcenter-io.s3.amazonaws.com/uploads/self/UizwAN8Ior3WeNbSf7PXj0why2ZxR7eo2uIawlMq.pngpng)](https://help.tawk.to/article/adding-a-widget-to-your-website)
Source

[Follow the instructions in the help center of tawk.to](https://help.tawk.to/article/adding-a-widget-to-your-website) if you need more information on how to install their chat widget.

## **Make the**[**tawk.to**](http://tawk.to)**widget invisible by default**

Once you've got the [tawk.to](http://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](http://tawk.to) widget, we have to copy and paste the following piece of code right after the [tawk.to](http://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](http://HelpCenter.io) widget.

## **Install the**[**HelpCenter.io**](http://HelpCenter.io)**widget on your website**

Now that we have the [tawk.to](http://tawk.to) widget properly set up but hidden, it is time to install the [HelpCenter.io](http://HelpCenter.io) widget.

Go to your [HelpCenter.io](http://HelpCenter.io) dashboard, choose the appropriate help center and then navigate to **Settings** -> **Widget**.

![https://helpcenter-io.s3.amazonaws.com/uploads/self/OoALuJa82QpESEA9kMUOF3HNiMILPHTn1e8MtufF.pngpng](https://helpcenter-io.s3.amazonaws.com/uploads/self/OoALuJa82QpESEA9kMUOF3HNiMILPHTn1e8MtufF.pngpng)

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](http://HelpCenter.io) widget would open up the [tawk.to](http://tawk.to) widget when somebody clicks on the "I can't find what I'm looking for" button.

The default [HelpCenter.io](http://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](http://HelpCenter.io) widget to show and open up your [tawk.to](http://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](http://HelpCenter.io) widget so it will not overlap with your messenger.

The final variant of your [HelpCenter.io](http://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](http://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](http://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.