Embedding your knowledge base with JavaScript


 
Ivan Penchev
Last Updated: 1 month ago

Another way to present your help center is to embed it into your own website or application via JavaScript. Here's how you can do this.

Embedding the help center on your desired page is really straightforward. Simply insert the code snippet provided below at the location on your page where you want the help center to appear. This code will generate an iframe that displays your help center within the designated area of your webpage.

Here is the HTML code snippet for embedding the help center:

<div id="hc_embed"></div>
<script>
    var subdomain = 'your_subdomain';
</script>
<script src="//helpcenter.io/js/embed.js"></script>

Replace your_subdomain with the actual subdomain assigned to your help center. The <div id="hc_embed"></div> element can be positioned anywhere on your page to control where the help center is displayed. Additionally, you can apply CSS styling to this element to match the look and feel of your website, ensuring a seamless integration.

You can also include some kind of pre-loader inside the hc_embed tag which will be displayed until the help center has loaded.

If you would like to completely disable you default help center URL, you can toggle on the JS-only embedding option from the Settings page by following this guide.

By following these steps, you can have your help center directly within your website/app as a subdirectory route or even hidden behind your own authentication wall without going through the SSO setup.

Have fun and reach out to us if you have any questions.


Was this article helpful?