> ## Documentation Index
> Fetch the complete documentation index at: https://docs.remark.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Page Context

> Control which starter questions appear by telling Remark what the page is about

The embedded chat generates starter questions based on the page it appears on. By default, it falls back to site-wide questions. Page context attributes tell Remark what the page is about so it can generate more relevant, specific questions for your visitors.

## How it works

Each unique page context gets its own pool of starter questions, shared by every visitor who loads that context. Remark generates the pool from the title, content, and products you provide via HTML attributes on the `<remark-qa-activator>` element. When the context changes — for example, when you edit `page-content` — Remark regenerates the pool for everyone.

The attributes describe the page, not the visitor. Text that changes from one visitor to the next either belongs in `context-key`, when it takes one of a small set of values, or should be left out.

Page context follows a precedence order: product context (most specific) takes priority over page context, which takes priority over site-wide questions (the fallback). If `external-id` is set, questions target that specific product regardless of other attributes.

## Attributes

<ParamField path="external-id" type="string">
  A product ID from your ecommerce platform. When present, questions target this specific product — overrides page context.

  On Shopify storefronts, Remark detects the product automatically, so you don't need to set this attribute on product pages.

  Example: `7982345678901`
</ParamField>

<ParamField path="page-key" type="string">
  Identifies the page. Same key = same question pool — defines which pool questions come from.

  Example: `/collections/running-shoes`
</ParamField>

<ParamField path="page-title" type="string">
  The page's title. Used when generating questions — helps Remark understand what the page is about.

  Example: `Women's Running Shoes`
</ParamField>

<ParamField path="page-content" type="string">
  The page's main text content. More content = more relevant questions.

  Example: `Shop our selection of lightweight trail and road running shoes...`
</ParamField>

<ParamField path="product-ids" type="string">
  Comma-separated product IDs from your ecommerce platform related to the page. Gives Remark additional product context without changing which pool is used.

  Example: `7982345678901,7982345678902`
</ParamField>

<ParamField path="context-key" type="string">
  Splits a page into separate question pools. Use it for multiple embedded chats on the same page, or for a page whose meaning depends on a small set of states — a quiz result, a selected tab, a step in a flow. Each distinct key gets its own pool, even at the same URL, and the key text is part of the context Remark generates that pool from. Keep the set of keys small and fixed: every new key is a new pool to generate.

  Example: `featured-collection`
</ParamField>

## Examples

### Product page

A furniture store's product detail page:

```html theme={null}
<remark-qa-activator
  external-id="8012345678901"
></remark-qa-activator>
```

Product context is the most specific scope. Remark generates questions about this exact product — dimensions, materials, care instructions. No need for `page-key`, `page-title`, or `page-content` since the product catalog provides all the context Remark needs.

<Tip>On Shopify storefronts, Remark detects the product automatically — you don't need to set `external-id` at all.</Tip>

### Collection page

An outdoor gear store's "Hiking Boots" collection:

```html theme={null}
<remark-qa-activator
  page-key="/collections/hiking-boots"
  page-title="Men's Hiking Boots"
  page-content="Waterproof hiking boots built for trails, scrambles, and all-day comfort. From lightweight dayhikers to burly backpacking boots."
  product-ids="7982345678901,7982345678902,7982345678903"
></remark-qa-activator>
```

Questions are generated about the collection as a whole — visitors might see "What's the difference between dayhiking and backpacking boots?" or "Which boots are waterproof?" The product IDs give Remark awareness of what's in the collection without scoping questions to a single product.

### Blog post

A skincare brand's ingredient guide:

```html theme={null}
<remark-qa-activator
  page-key="/blogs/skincare-guide/understanding-retinol"
  page-title="Understanding Retinol: A Beginner's Guide"
  page-content="Retinol is one of the most studied skincare ingredients. It promotes cell turnover, helps reduce fine lines, and can improve skin texture over time. Start with a low concentration and apply at night..."
></remark-qa-activator>
```

No product IDs needed unless the article recommends specific products. Questions are generated from the article content — visitors might see "How often should I use retinol?" or "Can I use retinol with vitamin C?"

### Landing page with multiple sections

A home goods store with separate "Kitchen" and "Bathroom" sections on the same page:

```html theme={null}
<!-- Kitchen section -->
<remark-qa-activator
  page-key="/collections/spring-sale"
  page-title="Spring Sale"
  page-content="Up to 40% off cookware sets, knife blocks, and countertop appliances."
  context-key="kitchen"
  product-ids="8012345678901,8012345678902"
></remark-qa-activator>

<!-- Bathroom section, further down the same page -->
<remark-qa-activator
  page-key="/collections/spring-sale"
  page-title="Spring Sale"
  page-content="Save on towel sets, shower organizers, and bath accessories."
  context-key="bathroom"
  product-ids="8012345678903,8012345678904"
></remark-qa-activator>
```

Both share the same `page-key` and `page-title` (same page) but `context-key` gives each section its own question pool. The kitchen section gets questions about cookware; the bathroom section gets questions about towels and organizers.

### Quiz results page

A running store's shoe finder ends on a results page. The recommendation differs per visitor but always comes from the same three categories:

```html theme={null}
<remark-qa-activator
  page-key="/pages/shoe-finder"
  page-title="Shoe finder results"
  page-content="The visitor just finished the shoe finder quiz and received a recommended shoe category."
  context-key="result: stability"
></remark-qa-activator>
```

`page-content` is the same for every visitor, and `context-key` carries the part that varies. Each of the three results gets its own pool, generated once and shared by every visitor with that result — a stability runner sees questions about stability shoes, a trail runner sees questions about trail shoes.

Putting the recommendation into `page-content` instead looks similar but behaves very differently. Each visitor with a new result rewrites the page's context and regenerates its single pool, so most visitors see questions written for someone else's result.

## Per-placement copy

Two more attributes let a specific embedded chat carry its own copy — useful when one placement, like a collection page, should read differently from the rest of your site without changing the text every other placement uses.

<ParamField path="label-overrides" type="string (JSON)">
  A JSON object mapping label paths to replacement text, using the same paths as the label editor in the dashboard (**Settings > Features > Labels**). Overrides apply only to this element; every other Remark surface keeps your site-wide labels. Keys that don't match an existing label are ignored.

  Example: `{"widgetScenes.landingHeading": "Got a question? We can help you."}`
</ParamField>

<ParamField path="landing-tagline" type="string">
  Replaces the featured expert's tagline on this element's landing screen. The expert's own tagline still appears on every other placement.

  Example: `Ask about hiking boots — or anything else.`
</ParamField>

```html theme={null}
<remark-qa-activator
  page-key="/collections/hiking-boots"
  label-overrides='{"widgetScenes.landingHeading": "Got a question? We can help you."}'
  landing-tagline="Ask about hiking boots — or anything else."
></remark-qa-activator>
```

<Tip>Not sure which label path controls a piece of copy? The label editor in the dashboard lists every customizable label, or contact `support@remark.ai`.</Tip>

## Tips

* **Use a stable path for `page-key`** — something like `/collections/hiking-boots`, not a full URL with query parameters. Remark normalizes the value, but a clean path is easiest to reason about.
* **Locale prefixes are stripped automatically** — `/en/collections/hiking-boots` and `/fr-ca/collections/hiking-boots` both resolve to `/collections/hiking-boots`, so you don't need to remove them yourself.
* **More `page-content` = better questions** — the more text you provide, the more relevant the generated questions will be.
* **`external-id` takes priority** — when present, questions are about that product regardless of other attributes.
* **Questions regenerate for everyone** — when context changes (for example, when you edit `page-content`), Remark generates a new pool and every visitor to that context sees it.

## Best practices

* **Keep `product-ids` stable.** Remark regenerates questions whenever the context changes, and `product-ids` are part of that context. If the product list changes on every page load — for example, because it reflects a randomized or personalized sort order — questions will regenerate constantly and never have a chance to settle and improve over time. Pass a consistent set of product IDs that represents the page's core products.
* **Send the same `page-content` to every visitor.** The same principle applies — timestamps, personalized greetings, live inventory counts, and per-visitor recommendations all change the context and trigger regeneration. A context that regenerates too often stops keeping up, and visitors see questions generated for an earlier version of the page. Strip volatile text before passing it. When the variation is a small set of states, move it to `context-key`; when it isn't, leave it out.