# Embedding your knowledge base with JavaScript

_Category: Build your help center_

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*](http://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](https://self.helpcenter.io/content/make-your-help-center-accessible-only-via-javascript) 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](http://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](http://HelpCenter.io) domain.

💡 Note: If your help center uses the standard [HelpCenter.io](http://HelpCenter.io) subdomain (like [mycompany.helpcenter.io](http://mycompany.helpcenter.io)), you can omit the `window._hcEmbedOpts` section entirely.

### **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.