Result page templates

Six branded, dynamic templates ready to apply to any design-outcome product — Dimensions, Radar, Persona, Deep Insights, Grid, and Narrative Report.

Productised ships six canonical result-page designs. Each is dynamic — the AI agent's structured output fills the page automatically, so every end user sees a personalised version. You don't have to design anything; you just pick the right one.

From Claude, you can browse them with list_result_templates (a visual gallery with live previews) and apply one with apply_result_template.

The six templates

Dimensions

The overall score gauge plus a colour-coded breakdown bar per dimension and an insight under each. The most informative design — best for scorecards across multiple pillars. This is the default applied by generate_product.

Radar Profile

A spider chart across all dimensions with axis labels. Best when balance matters more than absolute scores — readiness, fit, or capability assessments where the shape of the profile is the insight.

Persona

A named outcome ("The Momentum Founder") with a tagline, three defining traits, and next steps. No numbers anywhere. Best for tofu lead magnets where the deliverable is identity, not measurement.

Deep Insights

Side-by-side strengths / improve panels plus a "what we learned about you" narrative. Best when you want a qualitative, advisor-style read on the end user rather than a score breakdown.

Grid Scorecard

A framed, ruled layout with a segmented donut and stat cells. Pairs with the grid landing-page style. Best when you want a more technical, editorial-report feel.

Narrative Report

Longer-form advice: executive summary, three narrative sections with pull-quotes, a key insight, and next steps. No score required. Best for consultative products where the value is the analysis, not a number.

What `apply_result_template` does

Applying a template does three things in one call:

Sets the page HTML to the chosen branded design (centred, responsive, brand-fonts loaded).
Configures the AI agent's objectVariables with exactly the fields that design needs (e.g. overall_score, tier_label, dim1_score, dim1_insight, …) — and wires the agent to the AI Chat node if it isn't already connected.
Bakes in safe values for unset workspace variables. Templates reference custom:product_name, custom:score_word, custom:business_name, and custom:cta_url. If you haven't set one of those, the connector bakes a concrete value into the page (the product's name, a score word derived from it, your workspace name) so nothing renders blank. If the variable is set, the token is kept and resolves live on every view.

Without step two, the page would render literal {{ object:* }} tokens. With it, every new submission produces an agent output that fills the page automatically.

The report date is stamped by the renderer from the response's creation date ({{ chart:report_date }}) — the AI is never asked to output a date.

The CTA section at the bottom of every template ships with polished default copy and links to your custom:cta_url workspace variable. Set it once and every result page's button works:

"Set my workspace variable cta_url to https://cal.com/me/strategy."

Switching templates

You can switch templates at any time:

"Switch the result page to the Radar template."

Claude calls apply_result_template({ template_id: "radar" }). It overwrites the page HTML and updates the agent fields. New submissions get the new design.

Existing responses created with the old template's field set won't fully populate the new template if the templates have different fields. Re-submit a test response to see a fully-populated version. The score-based templates (Dimensions, Radar, Grid) share the same field set, so switching between them is lossless; Persona, Deep Insights, and Narrative Report each add their own fields.

Theming

Every template uses your product's brand accent (buttonColor on the AI Chat node). When you call apply_result_template, the connector automatically re-skins the template's coral accent to your accent — chrome (CTA button, badges, section markers) takes your brand colour.

Score colours stay semantic. Dimension bars, the hero score ring, and the tier badge are coloured by the score itself (green ≥ 70, amber ≥ 45, red below — and per-dimension green ≥ 7, amber ≥ 4.5, red below). A low score never renders in celebratory brand colour, on any theme.

Combine with apply_theme to also restyle the conversation surface — the result page picks up the same accent so the whole experience reads as one brand.

When templates aren't enough

Templates are the fastest path to a polished result page. But you can also:

Edit a template after applying it — apply_result_template then update_page to tweak copy, swap sections, change layout. You keep the template's compatible field set.
Design from scratch in Claude — skip the template and ask Claude to design the whole HTML. The coverage check ensures the tokens match the agent.
Paste in a design from Figma/Canva — use import_design to clean it up and surface tokens.

Designing custom result pages →

Was this page helpful?