# Integrate the widget with tawk.to

_Category: Integrations and API_

Show the widget first and open your tawk.to live 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.

**Who can do this:** Owners and Admins, with access to your website's code · **Plans:** All plans

## Step 1: Install tawk.to on your website

If tawk.to already runs on your website, skip to the next step.

1. Sign in to your tawk.to dashboard and go to **Administration** → **Channels** → **Chat Widget**.
2. Copy your JavaScript snippet and place it right before the closing `</body>` tag on every page where you want the chat.

For more detail, see tawk.to's guide to [adding a widget to your website](https://help.tawk.to/article/adding-a-widget-to-your-website).

## Step 2: Hide tawk.to until it's needed

Visitors should only see the chat once they've asked for help, so tawk.to starts hidden. Paste this code right after your tawk.to snippet:

```
<script>
window.Tawk_API.onLoad = function(){
    window.Tawk_API.hideWidget();
};
</script>
```

The widget shows the chat again when it's needed.

## Step 3: Add the widget and connect it to tawk.to

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 tawk.to:

```
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 shows and opens the tawk.to chat, and hides the widget so the two don't overlap. 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(){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 -->
```

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: tawk.to opens and the widget hides until the next page load.

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.

Not comfortable editing your website's code? Ask a developer, or [contact us](https://self.helpcenter.io/content/contact-support): we may be able to help.

## Related articles

- [Add the widget to your website](https://self.helpcenter.io/content/install-the-widget)
- [Integrations overview](https://self.helpcenter.io/content/integrations)
- [Handle contact requests yourself](https://developers.helpcenter.io/content/widget-custom-contact) on the developer portal
- [Widget JavaScript API](https://developers.helpcenter.io/content/widget-javascript-api) on the developer portal