Navigate Component

Overview

The Navigate component lets your agent send users to a specific page on your website — pricing, a product, checkout, docs, or any path.

WebChat / Lua Pop only

This component only works in the website chat widget (Lua Pop) and requires an onNavigate handler in your widget config.

Format

::: navigate
![navigate](/pathname?param1=value1&param2=value2)
:::

pathname — a relative page path (e.g. /pricing, /products/laptop, /checkout)
?param=value — optional query parameters

Navigate renders nothing in the chat — no button or link. When the message arrives, the widget strips the block and immediately calls your onNavigate handler, so navigation happens automatically. Always include a line of context before the block so the jump isn’t a surprise.

How it works

Agent includes a navigate block

Our pricing starts at $300/month. Here's the full breakdown:

::: navigate
![navigate](/pricing?channel=web)
:::

Widget calls your onNavigate handler

onNavigate("/pricing", { query: { channel: "web" } });

Your code performs the navigation

Route the user using your framework (see below).

Configure the onNavigate handler

Navigation only works if you pass an onNavigate handler to the widget. It receives the pathname and an options object with the parsed query params.

window.LuaPop.init({
  agentId: "your-agent-id",
  onNavigate: (pathname, options) => {
    // pathname: "/pricing"
    // options.query: { channel: "web" }
    const params = new URLSearchParams(options.query).toString();
    window.location.href = params ? `${pathname}?${params}` : pathname;
  }
});

Using a router? Swap the last line for your framework:

// React Router
navigate({ pathname, search: new URLSearchParams(options.query).toString() });

// Next.js
router.push({ pathname, query: options.query });

// Vue Router
router.push({ path: pathname, query: options.query });

Query parameters

Pass data to the destination page through the URL:

::: navigate
![navigate](/products/laptop?source=chat&campaign=spring)
:::

onNavigate("/products/laptop", {
  query: { source: "chat", campaign: "spring" }
});

Common uses: attribution (?source=chat), pre-filling forms (?product=123), campaigns (?promo=SAVE10), or opening a specific tab/filter (?tab=specs).

Tell your agent to use it

Components are never used automatically — instruct the agent in its persona or a skill context:

persona: |
  You are a shopping assistant for TechStore.

  After describing a product, send the user to its page:

  ::: navigate
  ![navigate](/products/PRODUCT_SLUG?source=chat)
  :::

  For pricing questions, send them to pricing:

  ::: navigate
  ![navigate](/pricing?channel=chat)
  :::

  Always add source=chat for tracking.

Best practices

Add context before the block

Because navigation is automatic, precede the block with a sentence about where the user is going (e.g. “Here’s the full pricing breakdown:”) so the jump feels intentional.

Use relative paths

Prefer /pricing or /products/123 over absolute URLs like https://yoursite.com/pricing — relative paths route correctly through onNavigate.

Include tracking parameters

Add ?source=chat (or similar) so you can measure how much traffic and conversion comes from the agent.

Troubleshooting

Nothing happens

Make sure an onNavigate handler is passed to window.LuaPop.init(). Without it the block is stripped but no navigation occurs. Check the console for errors and confirm the pathname is relative.

Query parameters missing

Use a single ? and join params with &: /page?a=1&b=2 (not /page?a=1?b=2).

Agent never navigates

The agent only uses the component if you instruct it in the persona or skill context with the exact format shown above.

Next steps

Widget Configuration

Set up the onNavigate handler

Widget Events

All widget callbacks and events

Response Formatting

Explore the other components

Getting Started

Configuration

Integration

Features

Help

Navigate Component

Overview

WebChat / Lua Pop only

Format

How it works

Configure the onNavigate handler

Query parameters

Tell your agent to use it

Best practices

Troubleshooting

Next steps

Widget Configuration

Widget Events

Response Formatting

​Overview

WebChat / Lua Pop only

​Format

​How it works

​Configure the onNavigate handler

​Query parameters

​Tell your agent to use it

​Best practices

​Troubleshooting

​Next steps

Widget Configuration

Widget Events

Response Formatting

Overview

Format

How it works

Configure the onNavigate handler

Query parameters

Tell your agent to use it

Best practices

Troubleshooting

Next steps