Another way to present your help center is to embed it directly into your own website or application using a simple JavaScript snippet. Here’s how to set it up.

Step 1: Insert the Embed Code

Embedding your help center on your desired page is straightforward. Simply insert the code snippet below at the exact location on your page where you want the help center to appear. This code creates an iframe that displays your help center within your webpage.

<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 (for example, mycompany for mycompany.helpcenter.io).

The <div id="hc_embed"></div> element determines where the help center appears on your page. You can position it anywhere and style it with CSS to match your website’s design for a seamless integration.

For example:

#hc_embed {
    width: 100%;
    min-height: 600px;
    border: none;
}

Step 2: Add a Preloader (Optional)

You can include a preloader or loading animation inside the <div id="hc_embed"></div> element. This will be displayed until the help center fully loads.

Step 3: Use JavaScript-Only Mode (Optional)

If you’d like to disable your default help center URL and use only the embedded version, you can enable the “JS-only embedding” option from your Help Center’s Settings page.

Follow this guide for detailed instructions.

Step 4: For Help Centers on a Custom Domain

If your help center is hosted on a custom domain instead of the default *.helpcenter.io subdomain, you’ll need to include an additional configuration option in your embed script. Otherwise, your embedded help center might not work as expected.

Here’s how your script should look:

<div id="hc_embed"></div>
<script>
    var subdomain = 'your_subdomain';

    window._hcEmbedOpts = {
        customDomain: 'help.mycompany.com'
    };
</script>
<script src="//helpcenter.io/js/embed.js"></script>

This customDomain option tells the embed script to load your help center from your own domain (e.g. help.mycompany.com) instead of the default HelpCenter.io domain.

Step 5: Enjoy Seamless Integration

Once configured, your help center will appear directly inside your website or app — even as a subdirectory route or behind your own authentication wall, without requiring any SSO setup.

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