# Integrate the widget with the Intercom Messenger

_Category: Integrations and API_

Show the widget first and open the Intercom Messenger 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

Want your articles inside Intercom instead, with Messenger search and Fin trained on them? That's the Intercom integration. See [Connect Intercom](https://self.helpcenter.io/content/intercom).

## Step 1: Install the Intercom Messenger

If the Intercom Messenger already runs on your website, skip to the next step. Otherwise, install it by following Intercom's instructions.

## Step 2: Hide the Intercom launcher

Visitors should only see the Messenger once they've asked for help, so hide Intercom's launcher and let the widget open the Messenger when it's needed.

If you use Intercom's JavaScript snippet, add `hide_default_launcher: true` to its `intercomSettings` object. If you haven't changed anything else, the first part of the snippet looks like this:

```
<script>
    window.intercomSettings = {
      api_base: "https://api-iam.intercom.io",
      app_id: "your-app-id",
      hide_default_launcher: true
    };
</script>
```

If you added Intercom some other way, for example through an integration, hide the launcher in your Intercom settings. Intercom explains how in [Turn off, show or hide the Intercom Messenger](https://www.intercom.com/help/en/articles/189-turn-off-show-or-hide-the-intercom-messenger).

## Step 3: Add the widget and connect it to Intercom

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 the Messenger:

```
onContactsRequest: function(){if(window.Intercom) Intercom('show'); else console.error('Unable to find Intercom widget.')}
```

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.Intercom) Intercom('show'); else console.error('Unable to find Intercom 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, and the Intercom Messenger opens.

Pay attention to what people ask in the Messenger, 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 Messenger opens. To close it at the same time, add `window.hcWidget.hide();` inside your `onContactsRequest` function. See [Widget JavaScript API](https://developers.helpcenter.io/content/widget-javascript-api) on the developer portal.
- 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

- [Connect Intercom](https://self.helpcenter.io/content/intercom)
- [Add the widget to your website](https://self.helpcenter.io/content/install-the-widget)
- [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