Hosting HelpDocs at a Subfolder of Your Site

By default HelpDocs comes with a subdomain (e.g. support.helpdocs.io) and a custom domain (e.g. help.domain.com). They're great for SEO by default (Google's pretty good at working out which content's yours now!) and for most customers there's no need to change things.

There's some cases where it's desirable to integrate your docs more into your site.

If you need to it's possible to host your HelpDocs at a subfolder of your own domain and there's a couple ways to do that.

Embedding with an iframe 

You can easily add an iframe to your HelpDocs subdomain from anywhere on your site. This is a little tricky to make look awesome but we have some customers that've done this super successfully.

<iframe src="https://support.helpdocs.io" height="500" width="1000"></iframe>

You can even update URLs in the address bar when people click links. You'd need to write a little custom JavaScript inside your HelpDocs and on the page where you're embedding it.

Then use postMessage to send messages between the two. You'll want to do that on page loads at either end.

Hiding Navigation in an iframe

If you're looking to embed your iframe in a website or an app you might like to hide the navigation so it looks native. While we can't give explicit instructions here are some general steps you could take.

1. Add a class to the elements you want to hide

If you're using custom templates you can easily add a class in the hbs files. Otherwise you'd probably want to use a little JavaScript in Settings > Customize > Code > JavaScript. A class name like hide-in-app should do it.

1. When the iframe is loaded in your website/app, add a query parameter

You can add something like ?hide=true to the end of the URL so you can tell when it's being loaded in your website/app.

1. Read that query parameter with some JavaScript

Something along the lines of this should do it, although always check.

/[?&]hide=true/.test(location.search)

1. If the query parameter is there, hide those elements

You can achieve this pretty easily with JavaScript. Our current templates don't load jQuery, so here's a plain example. It waits for the page because custom JavaScript goes in the head:

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.hide-in-app').forEach((el) => { el.style.display = 'none' })
})

Advanced: Using a Reverse Proxy

You can also reverse proxy your docs through something like nginx. You'll need set up a listen block to rewrite the URL of your subfolder to your HelpDocs subdomain, like this:

location /help/ {
    resolver               8.8.8.8;
    set                    $proxy_pass_url    https://support.helpdocs.io;
    rewrite                ^/help/(.*)        /$1 break;
    proxy_pass             $proxy_pass_url;
    proxy_ssl_server_name  on;
}

Then in the HelpDocs dashboard, include the subfolder in Settings > Domains > Custom domain. So that'll look something like myapp.com/help

If you don't have a custom domain saved yet, save it without the subfolder first (myapp.com), then add the subfolder and save again.

We'll take care of rewriting all the internal links our side.

Since the address is a folder on your own site, HTTPS is set up there rather than in HelpDocs, and Connection will show Not checked. That's expected.

Debugging nginx

nginx is an awesome reverse proxy... until it's not. Depending on your setup, you may experience a variety of problems getting this working, especially when you're working with SSL and load balancers. If you're having problems, try experimenting with these options: