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 of your Chatbase help center.
Remember to replace {agentId} with your actual Chatbase Agent ID. You can
find this ID in your Chatbase dashboard settings.
Required RoutesFor the help center to function correctly, you must proxy these paths:
/help and /help/* - The help center pages/__cb/* - Static assets (JavaScript, CSS, images)/api/chat/{agentId}/* - Chat API endpoints for features like lead submission
Replace {agentId} with your actual Agent ID in all rules. Implementation Examples
Choose the tab below that corresponds to your website’s framework or hosting platform.
Next.js
Vercel
Netlify
Express (Node.js)
For projects using the Next.js framework, you can 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 [
{
source: "/help",
destination: "https://chatbase.co/{agentId}/help",
},
// This rule is needed to correctly proxy sub-pages of your help center.
{
source: "/help/:path*",
destination: "https://chatbase.co/{agentId}/help/:path*",
},
// Proxy static assets (JavaScript, CSS, images)
{
source: "/__cb/:path*",
destination: "https://chatbase.co/__cb/:path*",
},
// Proxy chat API endpoints for your agent
{
source: "/api/chat/{agentId}/:path*",
destination: "https://chatbase.co/api/chat/{agentId}/:path*",
},
];
},
};
module.exports = nextConfig;
If you host your site on Vercel (regardless of the framework), you can use a vercel.json file to configure rewrites at the platform level.
- Create a
vercel.json file at the root of your project if it doesn’t already exist.
- Add a
rewrites array to the file.
// vercel.json
{
"rewrites": [
{
"source": "/help",
"destination": "https://chatbase.co/{agentId}/help"
},
{
"source": "/help/:path*",
"destination": "https://chatbase.co/{agentId}/help/:path*"
},
{
"source": "/__cb/:path*",
"destination": "https://chatbase.co/__cb/:path*"
},
{
"source": "/api/chat/{agentId}/:path*",
"destination": "https://chatbase.co/api/chat/{agentId}/:path*"
}
]
}
For sites hosted on Netlify, you can configure rewrites in your netlify.toml file.
- Create or open the
netlify.toml file at the root of your project.
- Add a
[[rewrites]] rule.
# netlify.toml
[[rewrites]]
from = "/help/*"
to = "https://chatbase.co/{agentId}/help/:splat"
status = 200 # A 200 status indicates a rewrite, not a redirect
[[rewrites]]
from = "/help"
to = "https://chatbase.co/{agentId}/help"
status = 200
# Proxy static assets (JavaScript, CSS, images)
[[rewrites]]
from = "/__cb/*"
to = "https://chatbase.co/__cb/:splat"
status = 200
# Proxy chat API endpoints for your agent
[[rewrites]]
from = "/api/chat/{agentId}/*"
to = "https://chatbase.co/api/chat/{agentId}/:splat"
status = 200
If you are running a custom Node.js server with Express, you can use the http-proxy-middleware package to create a rewrite.
-
First, install the necessary packages:
npm install express http-proxy-middleware
-
Then, set up the proxy in your Express application.
// server.js
const express = require("express");
const { createProxyMiddleware } = require("http-proxy-middleware");
const app = express();
const PORT = process.env.PORT || 3000;
// The agentId should be stored securely, e.g., in environment variables
const AGENT_ID = process.env.CHATBASE_AGENT_ID || "{agentId}";
// Proxy for help center pages
const helpProxy = createProxyMiddleware({
target: `https://chatbase.co`,
changeOrigin: true,
pathRewrite: {
[`^/help`]: `/${AGENT_ID}/help`,
},
proxyTimeout: 5000,
});
// Proxy for static assets (JavaScript, CSS, images)
const assetsProxy = createProxyMiddleware({
target: `https://chatbase.co`,
changeOrigin: true,
proxyTimeout: 5000,
});
// Proxy for chat API endpoints (scoped to your agent only)
const chatApiProxy = createProxyMiddleware({
target: `https://chatbase.co`,
changeOrigin: true,
proxyTimeout: 5000,
});
// Apply proxies to routes
app.use("/help", helpProxy);
app.use("/__cb", assetsProxy);
app.use(`/api/chat/${AGENT_ID}`, chatApiProxy);
// Your other routes...
app.get("/", (req, res) => {
res.send("Your ACME Inc. Homepage");
});
app.listen(PORT, () => {
console.log(`Server listening on port ${PORT}`);
});
SitemapsYour proxied help center content will not be automatically included in your primary domain’s sitemap. You may need to add these URLs manually if SEO for your help content is a priority.
