Build a Page Navigation Chatbot

Your users ask "where do I change my password?" or "where are my invoices?" all the time. A page navigation chatbot answers and opens that page for them. We run this on our own dashboard: ask the Chat Data assistant how to change a chatbot's system prompt, and it opens that chatbot's Model settings.

How it works

The chatbot needs three things:

1. A list of your pages in its knowledge base: each page's URL and what it is for.
2. Where the user is: the current page URL, plus any ids your URLs need.
3. A way to move the user: a browser action that opens a URL on your page.

When a user asks where something is, the model finds the page in its knowledge base, fills in the ids, and calls the action with the finished URL.

Step 1: Add your pages to the knowledge base

Create a CSV file with one row per page: its URL and a short description of what users do there. Write ids that change from user to user as placeholders in braces.

| URL                                                     | Description                                                              |
|---------------------------------------------------------|--------------------------------------------------------------------------|
| https://app.example.com/projects                        | Projects: list of all projects, with search and the New Project button.  |
| https://app.example.com/projects/{projectId}/settings   | Project settings: project name, members and the delete button.           |
| https://app.example.com/account/billing                 | Billing: current plan, change plan, payment methods and invoices.        |
| https://app.example.com/account/security                | Security: change password and two-factor authentication.                 |

Upload it in Data Sources → File. Each row becomes one entry in the knowledge base (see CSV files):

{
  "URL": "https://app.example.com/account/billing",
  "Description": "Billing: current plan, change plan, payment methods and invoices."
}

When a user asks "where are my invoices?", the search returns this row, and the model takes its URL.

Step 2: Tell the chatbot where the user is

In Settings → Chat Interface → Other Configurations, turn on Enable Page Context. The model then sees the URL of the page the user is on, for example https://app.example.com/projects/p_123/tasks, and can use p_123 as {projectId}.

If a page needs an id that isn't in the current URL, send it with the Chat Data SDK:

window.chatbot.sendUserInfo({
  name: user.name,
  email: user.email,
  info: `Current account id: ${user.accountId}`,
})

Step 3: Create the navigation action

Go to Settings → Actions, click Custom action and choose Visitor's browser.

• Action Name: navigate_to_page
• Description: Open a page of our app for the user when they ask where to find, change or configure something, or ask to go somewhere. Use the page URLs from the CONTEXT INFORMATION, and fill in the ids from the current page URL and the user info.
• Parameter: path, type string, required. Description: The page to open, as a full URL from the knowledge base with every {placeholder} filled in.
• Code: choose Write the code here and paste:

// Your own hosts. Any other site is refused.
const ALLOWED_HOSTS = ['app.example.com', 'www.example.com']

const path = String(args.path || '').trim()
let url = null
try {
  if (path) url = new URL(path, window.location.origin)
} catch {}

const allowed =
  url &&
  (url.origin === window.location.origin ||
    (url.protocol === 'https:' && ALLOWED_HOSTS.includes(url.hostname)))
if (!allowed) {
  return { status: 'error', error: `"${args.path}" is not a page of this site.` }
}

// Return first, then open the page.
setTimeout(() => window.location.assign(url.href), 0)
return { opened: url.href }

Replace ALLOWED_HOSTS with your own domains, so the chatbot can only open your pages.

Step 4: Add a line to the base prompt

In Settings → Model, add to the base prompt:

When the user asks where or how to do something in our app, answer briefly and call navigate_to_page to open that page.

Step 5: Test it on your website

Browser actions run on your website, not in the dashboard Playground. Open a page of your site with the chat bubble and ask "Where can I see my invoices?". The billing page opens.

Example: the Chat Data assistant

This is exactly what runs our own assistant, the one in the video.

Knowledge base: Chat Data's page list, 109 pages with two placeholders, {chatbotId} and {workspaceSlug}:

| URL                                                               | Description                                                     |
|-------------------------------------------------------------------|-----------------------------------------------------------------|
| https://www.chat-data.com/chatbot/{chatbotId}/settings/model      | Model settings (base prompt / system prompt): Base Prompt, ...  |
| https://www.chat-data.com/chatbot/{chatbotId}/update-chatbot-data | Data sources (training data): add or update the knowledge ...   |
| https://www.chat-data.com/w/{workspaceSlug}/settings/plans        | Workspace billing and plan: current plan, credits, invoices ... |

Where the user is: Enable Page Context is on, and the dashboard sends the workspace slug and chatbot id:

window.chatbot.sendUserInfo({
  name: currentUser.name,
  email: currentUser.email,
  info: `Current workspace slug: ${workspaceSlug}\nCurrent chatbot id: ${chatbotId}`,
})

The action navigate_to_page:

• Description: Open a page of the Chat Data app for the user when they ask where to find, change or configure something, or ask to go somewhere. Use the page paths from the CONTEXT INFORMATION, and fill in {chatbotId} from the current page URL . The current active workspace slug is also provided in the user info if they are logged in.
• Parameter path (string, required): The Chat Data app page to open, as a path such as /chatbot/{chatbotId}/settings/model or /my-chatbots, or a full https://www.chat-data.com/... URL from the documentation.
• Code:

const APP_HOSTS = ['www.chat-data.com', 'chat-data.com']
const value = typeof args.path === 'string' ? args.path.trim() : ''
let url = null
if (value && !value.startsWith('//') && !value.includes('\\')) {
  try {
    url = new URL(value, window.location.origin)
  } catch {}
}
const ownHost =
  url &&
  (url.origin === window.location.origin ||
    (url.protocol === 'https:' && APP_HOSTS.includes(url.hostname)))
if (!ownHost) {
  return {
    status: 'error',
    error: `"${args.path}" is not a page of the Chat Data app. Use a path such as /chatbot/{chatbotId}/settings/model.`,
  }
}
const appPath = `${url.pathname}${url.search}${url.hash}`
setTimeout(() => {
  if (window.next?.router) window.next.router.push(appPath)
  else window.location.assign(appPath)
}, 0)
return { opened: appPath }

Base prompt line:

When the user asks where or how to do something in Chat Data, answer briefly and call navigate_to_page to open that page.

Ask "How do I change my chatbot's system prompt?" while looking at a chatbot: the search returns the Model settings row, the model fills in {chatbotId} from the current page URL, and the action opens that chatbot's Model settings.