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

# Live Pages

> Create dynamic pages alongside your chatflows — from pre-built page templates to fully custom HTML

Live Pages are standalone web pages that live within a chatflow's context. Use them to display personalized results, host informational content, or create any custom page experience that complements your conversational flow. Each page gets its own URL and can exchange data with the chatflow through placeholders and navigation links.

***

## Use Cases

* **Personalized results** — show calculations, recommendations, or summaries based on user responses
* **Informational content** — detailed explanations, educational material, or product details
* **Terms & agreements** — legal documents or consent pages
* **Landing pages** — entry points that introduce topics before starting a chatflow
* **Interactive content** — custom visualizations, embedded tools, or rich media experiences

***

## Creating a Live Page

<Steps>
  <Step title="Access Live Pages">
    Open your flow in the Template Builder and navigate to the **Live Pages** section
  </Step>

  <Step title="Create New Page">
    Click **Create New Page** to open the creation wizard
  </Step>

  <Step title="Select Page Type">
    Choose **Managed Page** for a pre-built template or **Import HTML** to upload custom HTML
  </Step>

  <Step title="Configure">
    Enter the page name and pathname, then complete the type-specific configuration
  </Step>

  <Step title="Save and Publish">
    Save your page and publish the template to make it live
  </Step>
</Steps>

***

## Page Types

<Tip>
  Prefer building visually? The [Live Page Builder](/features/live-page-builder) lets you compose pages from drag-and-drop blocks — no HTML required — with support for [grid layouts](/features/live-page-grid), [conditional blocks](/features/live-page-conditional-blocks), [web component blocks](/features/live-page-web-components), [templates](/features/live-page-templates), and [PDF generation](/features/live-page-pdf).
</Tip>

### Import HTML

Upload a complete HTML document for full control over design and content. Your HTML is rendered inside a sandboxed iframe with permissions for scripts, modals, same-origin requests, and user-activated navigation.

<Tip>
  Your HTML file should be self-contained. Include all styles inline or link to external stylesheets.
</Tip>

#### Dynamic Placeholders

Import HTML pages support placeholders that get replaced with dynamic values when the page loads. Use double curly braces to insert them:

```html theme={null}
<p>Hello, {{USER_NAME}}!</p>
<p>Your estimated savings: {{TOTAL_SAVINGS}}</p>
```

Map each placeholder to a Flow Builder resource:

* **Entity responses** — values collected from user inputs
* **Variables** — calculated or computed values
* **Raw** — hardcoded values

**System placeholders** are automatically available without mapping:

| Placeholder               | Description                                 |
| ------------------------- | ------------------------------------------- |
| `{{CHATFLOW_RETURN_URL}}` | URL to return the user back to the chatflow |

<Note>
  Placeholder values are interpolated server-side before the page is displayed. Values are
  HTML-escaped for security. Unmapped placeholders are removed from the final output.
</Note>

#### Linking Between Pages

Pages can link to each other using relative pathnames:

```html theme={null}
<a href="../pages/terms">View Terms</a>
<a href="../pages/privacy">Privacy Policy</a>
```

### Managed Pages

Pre-built, configurable page templates that require no coding. Toggle features on or off, customize labels per locale, and preview changes in real time — all from the editor UI.

**Currently available:**

| Page Type       | Description                                                                                           |
| --------------- | ----------------------------------------------------------------------------------------------------- |
| **Result Page** | Configurable results display with pension summaries, income projections, financial sections, and CTAs |

Each managed page exposes a set of feature toggles (e.g. navigation, graph, pension, savings, housing, footer) that you enable or disable to compose the page layout you need.

#### Theming

Managed pages support per-page theme customization. Each page type defines its own set of overridable colors — typically covering backgrounds, accents, and text — that you can adjust to match your brand without writing CSS. Theme overrides are scoped to the page and do not affect other pages or the chatflow.

***

## Page Settings

### General Settings

| Setting         | Description                                                                          |
| --------------- | ------------------------------------------------------------------------------------ |
| **Name**        | Display name shown in the Live Pages browser (1–255 characters)                      |
| **Pathname**    | URL-safe identifier using lowercase letters, numbers, and hyphens (3–128 characters) |
| **Status**      | Enable or disable the page (disabled pages return 404, enabled by default)           |
| **Description** | Internal notes for template authors (max 1024 characters)                            |

### Page URL Structure

Each Live Page is accessible at:

```
/chatflow/[template-key]/pages/[live-page-pathname]
```

<Info>
  **Example**: If your template key is `retirement-planner` and your page pathname is `results`, the
  page URL would be `/chatflow/retirement-planner/pages/results`.
</Info>

### SEO Metadata

Configure per-locale SEO settings for your pages:

* **Title** — browser tab title and social sharing title
* **Description** — meta description for social sharing
* **Image** — Open Graph image URL for social sharing previews (1200×630px recommended)

***

## Label Customization (Managed Pages)

Customize any text content on a managed page with full localization support. Override labels per locale directly from the editor.

To find and edit a specific label, use the inline label editor:

1. Open the **Preview** tab in the Live Page editor
2. Hold **Alt** (Windows) or **Option** (Mac) and hover over text — inspectable elements highlight
3. Click a highlighted element to edit that label inline

***

## Link Entity

The **Link** is a special chatflow entity that creates navigation between your chatflow and Live Pages (or external URLs).

### Resume Behavior

Configure when the chatflow should advance after the user clicks the link:

| Mode          | Behavior                                                      |
| ------------- | ------------------------------------------------------------- |
| **On Click**  | Chatflow advances immediately when the user clicks the button |
| **On Return** | Chatflow waits until the user returns from the page           |

### Configuration Options

| Option              | Description                                                             |
| ------------------- | ----------------------------------------------------------------------- |
| **Label**           | Message shown above the link                                            |
| **Description**     | Additional context below the label                                      |
| **Button Label**    | Text on the CTA button (supports i18n)                                  |
| **Target**          | A Live Page or an external URL / relative path (`/` or `http` prefixed) |
| **Open in New Tab** | Whether to open the link in a new browser tab                           |
| **Animation**       | Optional typewriter animation for the label                             |

### Return to Chatflow

For Import HTML pages, add a return link using the system placeholder:

```html theme={null}
<a href="{{CHATFLOW_RETURN_URL}}">Return to Questionnaire</a>
```

***

## Editor Tabs

| Tab          | Purpose                                             |
| ------------ | --------------------------------------------------- |
| **General**  | Page name, description, pathname, enabled toggle    |
| **Meta**     | SEO metadata (title, description, image) per locale |
| **Preview**  | Live preview with inspect mode for i18n labels      |
| **Advanced** | View usage, advanced settings, and delete page      |

***

## Best Practices

<CardGroup cols={2}>
  <Card title="Mobile-First Design" icon="mobile">
    Ensure your HTML pages are responsive and work well on mobile devices
  </Card>

  <Card title="Clear Navigation" icon="signs-post">
    Always provide a way for users to return to the chatflow
  </Card>

  <Card title="Consistent Branding" icon="palette">
    Match your page styling to your chatflow theme for a seamless experience
  </Card>

  <Card title="Test Placeholders" icon="vial">
    Preview your pages to verify all placeholders are replaced correctly
  </Card>
</CardGroup>

<Warning>
  When you disable a Live Page, any Link entities referencing that page will lead to a 404 error.
  Update or remove the references before disabling.
</Warning>

***

## Troubleshooting

<AccordionGroup>
  <Accordion title="Page shows 404 error">
    * Verify the page is enabled in Live Pages settings
    * Check that the pathname matches exactly (case-sensitive)
    * Ensure the template is published with the page included
  </Accordion>

  <Accordion title="Placeholders not replaced">
    * Confirm placeholder syntax uses double curly braces: `{{PLACEHOLDER}}`
    * Check that the placeholder is mapped in page configuration
    * Verify the user has progressed far enough in the chatflow to have the required data
  </Accordion>

  <Accordion title="Page content not updating">
    * Re-upload the HTML file with your changes
    * Publish the template to make changes live
  </Accordion>
</AccordionGroup>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Live Page Builder" icon="pen-ruler" href="/features/live-page-builder">
    Build pages visually with drag-and-drop blocks
  </Card>

  <Card title="Flow Builder Basics" icon="grid" href="/features/flow-builder-basics">
    Learn the fundamentals of building chatflows
  </Card>

  <Card title="Variables" icon="brackets-curly" href="/features/variables">
    Understand how to use variables for dynamic content
  </Card>
</CardGroup>