Steps and blocks reference
Reference for Journey steps and blocks.
Every Journey is a list of screens. Each screen has a type. One type,
info_page, is built from blocks — the smaller pieces you stack to make a
screen say what you want.
Screen types
Each screen stores its answer under the screen's variable.
| Type | What the person does | Answer shape |
|---|---|---|
single_select | Picks one option from a list. Can advance on tap. | The option ID |
multi_select | Picks any number of options from a list. | A list of option IDs |
input | Fills one or more fields. Each field is text, email, number, or tel. | A value per field |
slider | Drags a slider between a minimum and a maximum. | A number |
swipe_cards | Swipes through a stack of cards, yes or no on each. | yes or no per card |
counter_select | Sets a count on each option with plus and minus. | A count per option |
info_page | Reads. No question — this screen is made of blocks. | None |
Every screen also supports a heading, a description, validation, a background, and routing rules that pick the next screen from the answers so far.
Blocks
Blocks fill an info_page. Three of them collect an answer:
single_select, multi_select, and pricing_plans. The rest present
content.
Text and layout
| Block | What it shows |
|---|---|
heading | Title or heading text |
text | Body text paragraph |
decorated_text | Rich text with an optional image on the left or right |
list | Bulleted or numbered list |
quote | Quote card with author, role, and optional star rating |
callout | Highlighted info, warning, success, or tip box |
card | Styled container with icon, title, and description |
columns | Side-by-side layout holding other blocks |
spacer | Vertical space between blocks |
divider | Horizontal line separator |
floating_label | Small label that pins to the top while the page scrolls |
badge | Small label pill |
icon | Icon or emoji |
Media
| Block | What it shows |
|---|---|
image | Image or illustration |
video | HTML5 video, or a YouTube or Vimeo embed |
lottie | Animated illustration from a Lottie file |
carousel | Swipeable slide deck |
device_frame | Phone mockup wrapping a screenshot or a video |
avatar_group | Overlapping row of avatars with an optional overflow count |
Numbers and charts
| Block | What it shows |
|---|---|
stat | Large number with a label |
metric | Stat card with an animated counter, label, and accent |
counter | Number that counts up from zero |
progress_bar | Horizontal progress indicator |
circular_progress | Circular progress indicator with multiple segments |
comparison_bar | Vertical bar chart for comparisons |
line_chart | Line chart with one or more series |
table | Comparison table with check, cross, lock, warning, icon, or text cells |
gravity_bin | Icons that fall and pile up with simulated gravity |
Sequence and motion
| Block | What it shows |
|---|---|
timeline | Vertical timeline with a connecting line and content nodes |
checklist | Checkbox list that ticks itself in sequence |
accordion | Expandable FAQ-style sections |
feature_row | Icon on the left, title and text on the right |
before_after | Split, stacked, or swipeable comparison of two states |
notification_stack | Mock push notifications sliding in one after another |
Action and answer
| Block | What it does |
|---|---|
button | Runs an action: next, back, skip, open a link, start a purchase, or open the discount-code box |
single_select | Pick-one option group; stores the choice in a variable |
multi_select | Pick-many option group; stores the choices in a variable |
pricing_plans | Selectable plans in featured, minimal, or comparison style; the selection drives the purchase_intent event |
Templates
Any text field can reference an answer with ${...}.
You picked ${goal}, so we'll start there.The same syntax reaches into a selected plan:
You're subscribing to ${selectedPlan.name} — ${selectedPlan.amount} ${selectedPlan.currency}/${selectedPlan.period}.Available plan paths: id, name, amount, currency, period,
originalAmount, perUnitLabel, display, trialDays, introOffer,
description, badge, icon, features, and metadata.
Templates and computed variables run in a restricted expression language.
It reads properties and array items, does arithmetic and comparisons, and
allows common string and array helpers plus Math. It never runs arbitrary
JavaScript, and never runs code supplied through Journey data.