Integrate the HelpCenter.io widget with your own contacts form

The HelpCenter.io widget serves as a primary source of customer support, aiming to reduce the number of repetitive questions directed at your support team. In this guide, we'll demonstrate how you can integrate the HelpCenter.io widget with your own contacts form. This way, when a user can't find the information they're looking for, they'll be directed to your contacts page in a new tab.

Prerequisites

You should have the HelpCenter.io smart widget installed on your website.
You should have a contacts page or form on your website where users can reach out for further assistance.

Steps

If you haven't already, start by installing the HelpCenter.io widget:

Go to your HelpCenter.io dashboard.
Choose the appropriate help center and navigate to Settings -> Widget.
If you haven't enabled the widget for your help center yet, click the button to enable it.
You'll be presented with the widget options and the installation script at the top of the page.

To direct users to your contacts page when they click on the "I can't find what I'm looking for" option, you'll need to modify the HelpCenter.io widget code.

The default 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 app_id: 'ab12c3' will be specific to your help center.

To modify the widget code, add the following line after app_id: 'ab12c3':

onContactsRequest: function(){
    window.open('https://yourwebsite.com/contacts', '_blank');
}

Replace https://yourwebsite.com/contacts with the actual URL of your contacts page.

The modified HelpCenter.io widget code will look 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(){
            window.open('https://yourwebsite.com/contacts', '_blank');
        }
    };
    document.body.appendChild(s);
})();
</script>
<!-- End HelpCenter.io smart widget code -->

Remember to use your own snippet provided on the Widget page of your help center dashboard.

Insert the modified JS snippet right before the closing </body> tag of your website or web app.

Conclusion

By following these steps, you'll integrate the HelpCenter.io widget with your own contacts form. Now, when users can't find the information they're looking for within the widget, they'll have the option to open your contacts page in a new tab, making it easy for them to reach out for further assistance. This approach ensures that users always have a way to get the help they need.

Categories

Categories