Advanced Integration
Help Page Proxy
Serve your published MuChat dedicated page on your own domain using page, asset, and chat API rewrites.
Use rewrites to display your MuChat dedicated conversation page on your website's domain. Visitors can open chat at an address such as https://your-domain.com/help while keeping that address in their browser.
The destination is your published page at https://widget.mu.chat/standalone?slug=YOUR_SLUG.
The Core Concept: Rewrites
A rewrite forwards a request to another URL and returns its response without redirecting the visitor. Your domain stays in the address bar.
- Source: The path on your website, such as
/help. - Destination: The published MuChat page, including its
slugquery parameter.
MuChat's dedicated page is a single conversation page; these examples do not create /help/* subpages. Live updates connect directly to MuChat's API through WebSocket, so a /socket.io proxy rule is not needed.
If your site uses locale routing, authentication middleware, or a catch-all route, let the page, asset, and scoped API paths reach their proxy rules. Apply a compatible content security policy to /help so its scripts, fonts, media, API requests, and direct WebSocket connection can load.
Implementation Examples
Choose the tab for your framework or hosting platform. Merge these rules with your existing configuration and keep them ahead of broader fallback rules.
Add a rewrites function to your project's next.config.js. Replace YOUR_SLUG once in the constant below:
const SLUG = "YOUR_SLUG";
/** @type {import('next').NextConfig} */
const nextConfig = {
async rewrites() {
return [
{
source: "/help",
destination: `https://widget.mu.chat/standalone?slug=${SLUG}`
},
{
source: "/__mu/:path*",
destination: "https://widget.mu.chat/__mu/:path*"
},
{
source: `/api/muchat/v2/standalone/${SLUG}/:path*`,
destination: `https://api.mu.chat/v2/standalone/${SLUG}/:path*`
}
];
}
};
module.exports = nextConfig;Restart the development server after changing the configuration, then deploy it to your server or hosting platform. External rewrites require a server; they do not work with a static HTML export. If your project uses next.config.mjs, use export default nextConfig instead of module.exports.
Add these entries to the rewrites array in your root vercel.json. Replace every YOUR_SLUG with the same published page address:
{
"rewrites": [
{
"source": "/help",
"destination": "https://widget.mu.chat/standalone?slug=YOUR_SLUG"
},
{
"source": "/__mu/:path*",
"destination": "https://widget.mu.chat/__mu/:path*"
},
{
"source": "/api/muchat/v2/standalone/YOUR_SLUG/:path*",
"destination": "https://api.mu.chat/v2/standalone/YOUR_SLUG/:path*"
}
]
}Vercel applies the rules on your next deployment. Keep the upstream no-store policy for the page and chat responses; do not override it with public CDN caching. For a Next.js project, configure the rewrites in one place rather than duplicating them in both files.
Add [[redirects]] entries to your root netlify.toml. In Netlify, status = 200 makes these rules proxy rewrites rather than browser redirects:
[[redirects]]
from = "/help"
to = "https://widget.mu.chat/standalone?slug=YOUR_SLUG"
status = 200
force = true
[[redirects]]
from = "/__mu/*"
to = "https://widget.mu.chat/__mu/:splat"
status = 200
force = true
[[redirects]]
from = "/api/muchat/v2/standalone/YOUR_SLUG/*"
to = "https://api.mu.chat/v2/standalone/YOUR_SLUG/:splat"
status = 200
force = trueReplace every YOUR_SLUG and deploy the configuration. Place these entries before a broad single-page-app fallback such as /* → /index.html.
Install the proxy packages in your server application:
pnpm add express http-proxy-middlewareCreate server.cjs, or merge the following proxies into your existing Express application. Replace YOUR_SLUG in the constant:
const express = require("express");
const { createProxyMiddleware } = require("http-proxy-middleware");
const app = express();
const SLUG = "YOUR_SLUG";
app.use(createProxyMiddleware({
target: "https://widget.mu.chat",
changeOrigin: true,
pathFilter: (path) => path === "/help" || path === "/help/",
pathRewrite: (path) => {
const url = new URL(path, "https://widget.mu.chat");
url.pathname = "/standalone";
url.searchParams.set("slug", SLUG);
return url.pathname + url.search;
}
}));
app.use(createProxyMiddleware({
target: "https://widget.mu.chat",
changeOrigin: true,
pathFilter: (path) => path.startsWith("/__mu/")
}));
app.use(createProxyMiddleware({
target: "https://api.mu.chat",
changeOrigin: true,
pathFilter: (path) =>
path.startsWith(`/api/muchat/v2/standalone/${SLUG}/`),
pathRewrite: (path) => path.replace(/^\/api\/muchat/, "")
}));
app.listen(process.env.PORT || 3000);Run it with node server.cjs and serve the public site over HTTPS. Register these proxies before JSON/body parsers and catch-all handlers so POST bodies and uploads reach the upstream intact. They are mounted at the application root to preserve the full asset and API paths.
After deployment, open /help directly and refresh it. Confirm the address stays on your domain, assets load from /__mu/, and HTTP chat requests reach /api/muchat/v2/standalone/YOUR_SLUG/. Send a question, wait for the complete streamed reply, and test any enabled forms or uploads. Refresh again to check that the conversation session continues. Checking only the initial page is not enough to verify the proxy.