Using the JS API of the Smart Widget


 
Ivan Penchev
Last Updated: 1 year ago

You will need technical knowledge or somebody with technical knowledge to utilize the information shared in this article.

For all the cases when you would like to integrate your help center widget even deeper into your project, you can use our simple JS API that is available once the widget initializes on a certain page. Here's how to use it and what you can do with the methods provided by the widget.

After the smart widget loads, you should have its API available through the window.hcWidget object. Here's what you can with it:

  • hide/show - Manually show and hide the widget - this way you can hide the default button and then use your own link or some other means of opening the widget. You can show the widget via the show method and hide it with hide. These methods do not expect any parameters. Here is an example.

if (window.hcWidget) {
    const myBtn = document.getElementById('#myBtn');
    myBtn.addEventListener('click', function() {
        window.hcWidget.show();
    });
}

  • setCategory - open the articles in a specific category - you can preload the articles of a certain category only with this method. It has one mandatory parameter - category id. The category ID could be extracted from the URLs of your help center. Usually, when you open a category in your help center, the URI looks like this: /category/1234-category-name where 1234 is the id of your category. Pass it to the setCategory method to populate the articles from that category in your widget.

    Note that this method will not automatically open your widget, if it has not been opened already. You may need to use the show method after setCategory if you would like to immediately open it.

    A use case for the setCategory method is when you would like to preload the articles of a certain category based on the page your users are currently at.

  • setHref - with this method, you can open a specific article in your widget. Simply copy the address of an article as you would have if you were to link it and pass it to the setHref method. As a second parameter, this method could be passed a boolean value (true/false) to tell it whether the widget should open immediately or not. For your convenience you also have the setHrefAndOpen method which accepts only the href param and automatically opens the widget.

window.hcWidget.setHrefAndOpen('https://self.helpcenter.io/content/why-should-i-go-with-a-hosted-solution-instead-of-creating-my-own');

You can also automatically open help center links in the widget. Follow this guide to learn more.

The JS API of the widget is in active development so more methods could be implemented in the future. Let us know if there is something you are trying to achieve that is not possible with the current API.


Was this article helpful?