If you're using the HelpCenter.io widget and want to display articles from a specific category inside it, you can achieve this by tweaking a bit the default parameters or by using the HelpCenter.io Widget API. Below is a step-by-step guide on how to do this using the hcOptions object and the setCategory method.

Step 1: Locate the Category ID

Each category in your HelpCenter.io setup has a unique ID, which you'll need to preload articles from that category in the widget. You can find this ID in the URL of the category page. For example:

• URL: https://yourcompany.helpcenter.io/category/801-products or https://help.yourcompany.com/category/801-products depending in whether you have configured a custom domain name or not.

• Category ID: 801

Like you can see above, the id of the category is the number right after /category/ and before the first dash (-) symbol.

Step 2: Preload the Category in the Widget

To display a specific category when the widget loads, you need to adjust a but the default widget embedding code and include the category parameter within the hcOptions object in your widget initialization code. Here's an example of how to set this up:

<script type="text/javascript">
(function(){
    var s = document.createElement('script');
    s.src = "//helpcenter.io/js/init.js";
    s.async = true;
    window.hcOptions = {
        app_id: 'Your_App_ID', // Replace with your actual app ID
        category: 801 // This is the new part, make sure you replace with the actual category ID you want to preload
    };
    document.body.appendChild(s);
})();
</script>

Setting the widget up like this will automatically preload all articles from that category ordered by popularity.

Step 3: Dynamically Change the Category (Optional)

If you need to change the category dynamically after the widget has already loaded, you can use the widget API and do so using the setCategory method of the window.hcWidget object. This can be useful if your website has multiple dynamically loaded pages (like with a JS router) or for single-page applications, where different sections should display articles from a different category.

Here’s how you can change the category dynamically. Simply inside your JS call the setCategory method on the window.hcWidget object like this:

window.hcWidget.setCategory(803); // Replace the number parameter with the new category ID

The hcWidget object should be available, if the HelpCenter.io widget has been properly initialized. The setCategory method allows you to adjust the displayed category based on a user interaction or the page context after the widget has already been loaded.

Summary

In summary, you have 2 ways to display the articles from a specific category inside your HelpCenter.io widget. Which one you would choose will broadly depend on your case. To conclude here are the options you have:

• Preload a Category: Use the category parameter in the hcOptions object inside the embedding code of the widget to preload a category.

• Change Category Dynamically: Utilize the setCategory method of the window.hcWidget object to dynamically request a category on the fly.

By following these steps, you can ensure that your users see the most relevant articles based on the context of the page they’re viewing, enhancing their experience and making your support resources more accessible.

If you need further assistance, don’t hesitate to reach out.