How to connect your Help.center to a custom sub folder?

Your knowledge base website can be loaded on a custom URL path under your website. For example, the URL that looks like:

https://companyname.help.center

can be set to load under your website like:

https://yourcompany.com/help

Note

  • We have separate instructions to connect help center to a custom subdomain.

  • The following articles uses Cloudflare to manage DNS and configure setup.

  • If you are unfamiliar with Cloudflare or DNS, please take the help of a Dev-ops team member.

Add custom subfolder path in Help.center

Open Help.center dashboard. Navigate to Settings → Knowledge Base → General. Choose the Subfolder option and enter the complete subfolder URL path ( For example, https://yourcompany.com/help ).

Finalize your changes by clicking on the Save changes button.

Create a Cloudflare Worker

Now, login to your Cloudflare dashboard that manages your website.

Navigate to Build → Compute & AI → Workers & Pages.

Inside Workers & Pages, you will see the option to Create application in the top right corner. Click on the same.

Here, you have to select one of the methods. For our use-case you can choose "Start with Hello World!".

Give a name for the worker, for example helpcenter-reverse-proxy, then click Deploy.

Add route for the Worker

Now that we have deployed a worker, we have to set up a routing rule that will direct traffic from your custom subfolder URL path (https://yourcompany.com/help)to the Cloudflare Worker.

Open your Worker Settings. Under Domains & Routes, click on Add to add a new route.

When you click the Add button, it will give you different options, choose the Route option.


Next, you have to configure your Route with the right information. Let's see each one by one.

  1. Under Zone, select your website domain (e.g., yourcompany.com) in the dropdown.

  2. For Route, you have to enter the regex pattern of your subfolder URL path.

    For example, if your URL path is https://yourcompany.com/help , then use the pattern *yourcompany.com/help* . This will ensure that all incoming request to /help and its subpaths are captured.

  3. Failure mode can be set to Fail closed (block).

If everything looks good, then click on Add route.

Update the Worker code

Once the route is added, we have to edit the code. This is done to allow the worker to intercept incoming requests to your URL path and forward them to Help.center.

First, click on Edit code from your worker dashboard.

Replace the entire worker.js code with the script given below.

Note

  • Replace HELP_HOST with the actual Help.center domain

  • PROXY_PREFIX should have the value of the subfolder URL path (e.g., /docs instead of /help).

// ONLY edit these
const HELP_HOST = 'yourcompany.help.center'; 
const PROXY_PREFIX = '/help'; // the path you want your help center to live on

addEventListener('fetch', (event) => {
	event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
	const originalUrl = new URL(request.url);


	if (originalUrl.pathname.endsWith('/') && originalUrl.pathname !== '/') {
		originalUrl.pathname = originalUrl.pathname.slice(0, -1);
		return Response.redirect(originalUrl.toString(), 301);
	}


	if (
		originalUrl.pathname !== PROXY_PREFIX &&
		!originalUrl.pathname.startsWith(`${PROXY_PREFIX}/`)
	) {
		return fetch(request);
	}

	// Build the upstream request with the prefix removed
	const upstreamUrl = new URL(originalUrl.toString());
	upstreamUrl.hostname = HELP_HOST;

	if (upstreamUrl.pathname === PROXY_PREFIX) {
		upstreamUrl.pathname = '/';
	} else if (upstreamUrl.pathname.startsWith(`${PROXY_PREFIX}/`)) {
		upstreamUrl.pathname = upstreamUrl.pathname.slice(PROXY_PREFIX.length) || '/';
	}

	const proxyRequest = new Request(upstreamUrl.toString(), request);

	// CRITICAL: Needed to resolve requests correctly
	proxyRequest.headers.set('X-Helpcenter-Base-Path', PROXY_PREFIX);
	proxyRequest.headers.set('X-Forwarded-Host', originalUrl.host);
	proxyRequest.headers.set('X-Helpcenter-Original-Host', originalUrl.host);


	return fetch(proxyRequest);
}

Click on Deploy to publish your changes.

Verify the setup

Open a new browser tab and type the URL containing the subfolder (https://yourcompany.com/help). If your help center loads successfully and displays your content, then the setup is successful.

Still need help?

Contact us

Knowledge Base