Here's how you can integrate the HelpCenter.io widget with Intercom's messenger so people could reach out to you through Intercom when they are unable to find the information they need in your help center through the in-app widget.

Install the Intercom widget

If you haven't done so already, go ahead and install the Intercom widget on your website by following the instructions on their website.

Hide the Intercom launcher

We want users to see the Intercom messenger only when they are unable to find the information they need in our help center. That's why we have to hide the Intercom messenger icon and open up the messenger by command from the HelpCenter.io widget.

So let's hide the Intercom messenger's default launcher. There are several ways for you to do this.

If you are using the JavaScript provided by Intercom, you can adjust the intercomSettings object and add one more key called hide_default_launcher and set it to true so the first part of the Intercom JS snipper would look something like this (if you haven't applied any other changes):

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

This would make the Intercom messenger icon remain hidden.

You may need the help of a developer, if you don't know what you are doing. You can also reach out to us. We might be able to help.

If you have installed the Intercom widget by some other means like through an integration , you can hide the Intercom messenger launcher from the Intercom settings. Simply follow this guide to do so: https://www.intercom.com/help/en/articles/189-turn-off-show-or-hide-the-intercom-messenger

Install the HelpCenter.io widget

Now that we have the Intercom messenger button hidden, we would like to get the help center widget in place.

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 for customization, together with an 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 that the HelpCenter.io widget would open up the Intercom widget when somebody clicks on the "I can't find what I'm looking for" button.

The default HelpCenter.io widget 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'
    };
    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 of code on the next line:

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

This tells the HelpCenter.io widget to open up your Intercom messenger when a user is unable to find enough information in your help center to solve a problem by themselves.

The final variant of your HelpCenter.io widget JS 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.Intercom) Intercom('show'); else console.error('Unable to find Intercom 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 have right before the closing </body> tag of your website or web app and that is all.

Now that you've done all of this, the HelpCenter.io widget will show first, providing your users with 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 Intercom messenger 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 less and less repetitive customer support requests.