Help Page & Form Proxy

Serve your ChatDrift help page and forms on your own domain using rewrites.

Help Page & Form Proxy

This guide explains how to use rewrites (also known as proxies) to display your ChatDrift help page and forms on your own domain. This provides a seamless, branded experience for your users, as they can access help content and submit forms without ever leaving your site.

The goal is to make your ChatDrift help page, normally available at https://www.chatwidget.app/help/{slug}, appear on a path like https://your-domain.com/help/{slug}, and your forms at https://www.chatwidget.app/forms/{form_id} appear on https://your-domain.com/forms/{form_id}.

Note

Proxying is optional. If you only need a branded URL for your help center, you can configure a custom domain in your ChatDrift dashboard instead. Proxying is the right choice when you want help pages and forms to live alongside your existing site under the same domain.

The Core Concept: Rewrites

A rewrite acts as a proxy. When a user visits the source path on your domain, your server fetches the content from the destination URL and serves it to the user. Crucially, the URL in the user's browser bar does not change.

Source: The path on your website that you want to use.
Destination: The full URL on www.chatwidget.app.

Note

Replace {slug} with your help page slug and {form_id} with your form ID in every rule below. You can find both in your ChatDrift dashboard.

Info

Required Routes

For help pages and forms to function correctly, you must proxy every path listed below. Skipping one (for example, the /_astro/* assets or the /api/help-chat endpoint) will break the page silently — the page will load but chat, form submission, or styling will fail.

Help page routes:

/help/{slug} and /help/{slug}/* — the help page itself
/api/help-chat — chat endpoint (requires X-Widget-Slug header to be forwarded)
/api/help-page-analytics — analytics events

Form routes:

/forms/{form_id} — the form page itself
/api/forms/{form_id} — form schema fetch
/api/forms/{form_id}/submit — form submission

Shared static assets:

/_astro/* — JavaScript, CSS, and image bundles used by both surfaces

Implementation Examples

Choose the tab below that corresponds to your website's framework or hosting platform.

For projects using the Next.js framework, configure rewrites in your next.config.js file. This is the recommended method for Next.js applications.

Open or create the next.config.js file at the root of your project.
Add the rewrites function to the configuration object.

// next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      // Help page
      {
        source: "/help/{slug}",
        destination: "https://www.chatwidget.app/help/{slug}",
      },
      {
        source: "/help/{slug}/:path*",
        destination: "https://www.chatwidget.app/help/{slug}/:path*",
      },
      // Help page APIs
      {
        source: "/api/help-chat",
        destination: "https://www.chatwidget.app/api/help-chat",
      },
      {
        source: "/api/help-page-analytics",
        destination: "https://www.chatwidget.app/api/help-page-analytics",
      },
      // Form page
      {
        source: "/forms/{form_id}",
        destination: "https://www.chatwidget.app/forms/{form_id}",
      },
      // Form APIs
      {
        source: "/api/forms/{form_id}",
        destination: "https://www.chatwidget.app/api/forms/{form_id}",
      },
      {
        source: "/api/forms/{form_id}/submit",
        destination: "https://www.chatwidget.app/api/forms/{form_id}/submit",
      },
      // Shared static assets
      {
        source: "/_astro/:path*",
        destination: "https://www.chatwidget.app/_astro/:path*",
      },
    ];
  },
};

module.exports = nextConfig;

After adding this configuration, restart your Next.js development server to apply the changes.

Note

Forward custom headers

The /api/help-chat endpoint reads the X-Widget-Slug header to identify your widget. The Next.js, Vercel, Netlify, and Express examples forward request headers automatically, so no extra configuration is needed. In the Cloudflare Worker example, headers are explicitly passed through via headers: request.headers — preserve that line if you customize the script.

Note

CORS is already handled

The /api/forms/{form_id}/submit endpoint returns Access-Control-Allow-Origin: *, so proxied form submissions work without any additional CORS configuration on your side. You do not need to add CORS headers or middleware to your proxy.

Verifying the Proxy

After deploying the rewrites, confirm the proxy is wired correctly:

Visit https://your-domain.com/help/{slug} — the help page should render and the browser URL should not change.
Open browser DevTools → Network — confirm that requests to /_astro/* return 200 OK.
Send a chat message on the help page — confirm a POST to https://your-domain.com/api/help-chat succeeds with a streamed response.
Visit https://your-domain.com/forms/{form_id}, fill the form, and submit — confirm POST https://your-domain.com/api/forms/{form_id}/submit returns 201 Created.

If any of these steps fails, double-check that the corresponding route from the Required Routes list is included in your config.

Note

Custom domain for the helpdocs site

This guide covers path-based proxying of help pages and forms served by www.chatwidget.app. If you instead run a dedicated branded helpdocs site, you can configure its custom domain directly in Dashboard → Helpdocs Settings → Custom Domain without setting up any proxy.

Note

Sitemaps

Proxied help and form content will not be automatically included in your primary domain's sitemap. If SEO for help content is a priority, add those URLs manually to your sitemap.

Help Page & Form Proxy

Serve your ChatDrift help page and forms on your own domain using rewrites.

Help Page & Form Proxy

Note

The Core Concept: Rewrites

Source: The path on your website that you want to use.
Destination: The full URL on www.chatwidget.app.

Note

Replace {slug} with your help page slug and {form_id} with your form ID in every rule below. You can find both in your ChatDrift dashboard.

Info

Required Routes

Help page routes:

/help/{slug} and /help/{slug}/* — the help page itself
/api/help-chat — chat endpoint (requires X-Widget-Slug header to be forwarded)
/api/help-page-analytics — analytics events

Form routes:

/forms/{form_id} — the form page itself
/api/forms/{form_id} — form schema fetch
/api/forms/{form_id}/submit — form submission

Shared static assets:

/_astro/* — JavaScript, CSS, and image bundles used by both surfaces

Implementation Examples

Choose the tab below that corresponds to your website's framework or hosting platform.

For projects using the Next.js framework, configure rewrites in your next.config.js file. This is the recommended method for Next.js applications.

Open or create the next.config.js file at the root of your project.
Add the rewrites function to the configuration object.

// next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      // Help page
      {
        source: "/help/{slug}",
        destination: "https://www.chatwidget.app/help/{slug}",
      },
      {
        source: "/help/{slug}/:path*",
        destination: "https://www.chatwidget.app/help/{slug}/:path*",
      },
      // Help page APIs
      {
        source: "/api/help-chat",
        destination: "https://www.chatwidget.app/api/help-chat",
      },
      {
        source: "/api/help-page-analytics",
        destination: "https://www.chatwidget.app/api/help-page-analytics",
      },
      // Form page
      {
        source: "/forms/{form_id}",
        destination: "https://www.chatwidget.app/forms/{form_id}",
      },
      // Form APIs
      {
        source: "/api/forms/{form_id}",
        destination: "https://www.chatwidget.app/api/forms/{form_id}",
      },
      {
        source: "/api/forms/{form_id}/submit",
        destination: "https://www.chatwidget.app/api/forms/{form_id}/submit",
      },
      // Shared static assets
      {
        source: "/_astro/:path*",
        destination: "https://www.chatwidget.app/_astro/:path*",
      },
    ];
  },
};

module.exports = nextConfig;

After adding this configuration, restart your Next.js development server to apply the changes.

Note

Forward custom headers

Note

CORS is already handled

Verifying the Proxy

After deploying the rewrites, confirm the proxy is wired correctly:

Visit https://your-domain.com/help/{slug} — the help page should render and the browser URL should not change.
Open browser DevTools → Network — confirm that requests to /_astro/* return 200 OK.
Send a chat message on the help page — confirm a POST to https://your-domain.com/api/help-chat succeeds with a streamed response.
Visit https://your-domain.com/forms/{form_id}, fill the form, and submit — confirm POST https://your-domain.com/api/forms/{form_id}/submit returns 201 Created.

If any of these steps fails, double-check that the corresponding route from the Required Routes list is included in your config.

Note

Custom domain for the helpdocs site

Note

Sitemaps

Proxied help and form content will not be automatically included in your primary domain's sitemap. If SEO for help content is a priority, add those URLs manually to your sitemap.