Skip to main content
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

1

Access Live Pages

Open your flow in the Template Builder and navigate to the Live Pages section
2

Create New Page

Click Create New Page to open the creation wizard
3

Select Page Type

Choose Managed Page for a pre-built template or Import HTML to upload custom HTML
4

Configure

Enter the page name and pathname, then complete the type-specific configuration
5

Save and Publish

Save your page and publish the template to make it live

​
Page Types

​
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.
Your HTML file should be self-contained. Include all styles inline or link to external stylesheets.

​
Dynamic Placeholders

Import HTML pages support placeholders that get replaced with dynamic values when the page loads. Use double curly braces to insert them: 
<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:
PlaceholderDescription
{{CHATFLOW_RETURN_URL}}URL to return the user back to the chatflow
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.

​
Linking Between Pages

Pages can link to each other using relative pathnames: 
<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 TypeDescription
Result PageConfigurable 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.

​
Page Settings

​
General Settings

SettingDescription
NameDisplay name shown in the Live Pages browser (1–255 characters)
PathnameURL-safe identifier using lowercase letters, numbers, and hyphens (3–128 characters)
StatusEnable or disable the page (disabled pages return 404, enabled by default)
DescriptionInternal notes for template authors (max 1024 characters)

​
Page URL Structure

Each Live Page is accessible at: 
/chatflow/[template-key]/pages/[live-page-pathname]
Example: If your template key is retirement-planner and your page pathname is results, the page URL would be /chatflow/retirement-planner/pages/results.

​
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
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:
ModeBehavior
On ClickChatflow advances immediately when the user clicks the button
On ReturnChatflow waits until the user returns from the page

​
Configuration Options

OptionDescription
LabelMessage shown above the link
DescriptionAdditional context below the label
Button LabelText on the CTA button (supports i18n)
TargetA Live Page or an external URL / relative path (/ or http prefixed)
Open in New TabWhether to open the link in a new browser tab
AnimationOptional typewriter animation for the label

​
Return to Chatflow

For Import HTML pages, add a return link using the system placeholder: 
<a href="{{CHATFLOW_RETURN_URL}}">Return to Questionnaire</a>

​
Editor Tabs

TabPurpose
GeneralPage name, description, pathname, enabled toggle
MetaSEO metadata (title, description, image) per locale
PreviewLive preview with inspect mode for i18n labels
AdvancedView usage, advanced settings, and delete page

​
Best Practices

Mobile-First Design

Ensure your HTML pages are responsive and work well on mobile devices

Clear Navigation

Always provide a way for users to return to the chatflow

Consistent Branding

Match your page styling to your chatflow theme for a seamless experience

Test Placeholders

Preview your pages to verify all placeholders are replaced correctly
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.

​
Troubleshooting

  • 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
  • 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
  • Re-upload the HTML file with your changes
  • Publish the template to make changes live

​
Next Steps

Flow Builder Basics

Learn the fundamentals of building chatflows

Variables

Understand how to use variables for dynamic content