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.
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 second rule is needed to correctly proxy asset requests
// like CSS, JS, and images from your help center.
{
source: "/help/:path*",
destination: "https://chatbase.co/{agentId}/help/: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*"
}
]
}
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
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}";
const chatbaseProxy = createProxyMiddleware({
target: `https://chatbase.co`,
changeOrigin: true,
pathRewrite: {
[`^/help`]: `/${AGENT_ID}/help`,
},
// Optional: Add a timeout for the proxy request
proxyTimeout: 5000,
});
// Apply the proxy to your desired route
app.use("/help", chatbaseProxy);
// 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.
