Page context

Overview

By default the agent only sees what the visitor types. With page context, you can tell the agent where the visitor is and what they’re looking at — a pricing page, a product detail, an account settings screen — so it can give smarter, more relevant answers without the visitor having to explain.

Quick start

<script src="https://unpkg.com/zephlo/dist/zephlo.js"></script>
<script>
  const zephlo = Zephlo.initialize({
    key: "flk_your_api_key",
    chatbotId: "YOUR_AGENT_ID",
  });

  // Send custom context about the current page
  zephlo.sendContextUpdate({ product: "Pro Plan", price: "$49/mo" });
</script>

import Zephlo from "zephlo";

const zephlo = Zephlo.initialize({
  key: "flk_your_api_key",
  chatbotId: "YOUR_AGENT_ID",
});

zephlo.sendContextUpdate({ product: "Pro Plan", price: "$49/mo" });

API

`sendContextUpdate(data, includePageDetails?)`

Sends a context payload to the agent over the active WebSocket connection. Call it whenever the visitor navigates or when relevant page data changes.

Context is delivered on the live chat connection. A brand-new visitor has no connection until they send their first message, so the latest context you set is what the agent sees once the conversation starts. To attach context to a proactive trigger before any chat begins, use the trigger’s pageContext option.

Parameter	Type	Required	Description
`data`	`Record<string, any>`	Yes	Key-value pairs describing the current page context
`includePageDetails`	`boolean`	No	When `true`, automatically appends the page URL, title, and meta description

// Custom data only
zephlo.sendContextUpdate({
  product: "Pro Plan",
  price: "$49/mo",
  category: "pricing",
});

// Custom data + automatic page details
zephlo.sendContextUpdate(
  { product: "Pro Plan", price: "$49/mo" },
  true
);

// Page details only (no custom data)
zephlo.sendContextUpdate({}, true);

Auto page details

When includePageDetails is true, the SDK automatically collects:

Field	Source
`url`	`window.location.href`
`title`	`document.title`
`meta_description`	`<meta name="description">` content

These are merged with your custom data. If you pass a key that overlaps (e.g. title), your value takes precedence.

What the agent sees

The page context is injected into the agent’s prompt as additional context:

<additional context>
page_context: {"url": "https://example.com/pricing", "title": "Pricing — Acme", "product": "Pro Plan", "price": "$49/mo"}
</additional context>

The agent can use this to tailor its responses. For example, if a visitor asks “What’s included?” while on the Pro Plan pricing page, the agent already knows which plan they’re looking at.

Updating context

You can call sendContextUpdate multiple times. Each call replaces the previous context on the server — it does not merge. Send the full context you want the agent to have each time.

// Visitor navigates to a new page
zephlo.sendContextUpdate({
  page: "checkout",
  cart_total: "$98.00",
  items: 2,
}, true);

For single-page apps, call sendContextUpdate on route changes to keep the agent informed as the visitor navigates.

Examples

E-commerce product page

zephlo.sendContextUpdate({
  page_type: "product",
  product_name: "Wireless Headphones",
  product_price: "$79.99",
  in_stock: true,
  category: "Electronics",
}, true);

SaaS pricing page

zephlo.sendContextUpdate({
  page_type: "pricing",
  highlighted_plan: "Pro",
  billing_cycle: "annual",
  currency: "USD",
}, true);

Account dashboard

zephlo.sendContextUpdate({
  page_type: "dashboard",
  plan: "Enterprise",
  usage_percent: 73,
  days_until_renewal: 14,
});

SPA route change listener

// React example
useEffect(() => {
  zephlo.sendContextUpdate({
    route: location.pathname,
    page_title: document.title,
  }, true);
}, [location.pathname]);

Getting started

Widget

Overview

Quick start

API

`sendContextUpdate(data, includePageDetails?)`

Auto page details

What the agent sees

Updating context

Examples

E-commerce product page

SaaS pricing page

Account dashboard

SPA route change listener

Next steps

Register tools

Form tools

​Overview

​Quick start

​API

​sendContextUpdate(data, includePageDetails?)

​Auto page details

​What the agent sees

​Updating context

​Examples

​E-commerce product page

​SaaS pricing page

​Account dashboard

​SPA route change listener

​Next steps

Register tools

Form tools

Overview

Quick start

API

`sendContextUpdate(data, includePageDetails?)`

Auto page details

What the agent sees

Updating context

Examples

E-commerce product page

SaaS pricing page

Account dashboard

SPA route change listener

Next steps