Card/Carousel step block

Card/Carousel step lets you present rich cards with images, descriptions, and optional CTA buttons. Choose this block when you want either a single card or a swipeable carousel inside the quiz.

Configuration

1. Add a Card/Carousel step block from the palette.
2. Toggle the Display mode (auto, single, carousel) depending on how many cards you need.
3. Add cards with titles, copy, images, and optional buttons (each button needs a label and URL).
4. Use the cards' continue button or per-card CTAs to guide respondents onward.

Product Cards (Pro)

Product Cards is a commerce-focused variant of this block. It uses the same card layout with extra pricing fields so you can present tailored offers inside the quiz.

Product fields

• Price: Current offer price (for example $49).
• Compare-at price: Original/reference price shown with strikethrough (for example $79).
• Billing suffix: Period label like /mo or /year.
• Badge: Short merchandising label like Best value or Most popular.

Product validation

• If Compare-at price is set, Price is required.

Settings

• Display mode: Auto adapts between single and carousel layouts; use Carousel for more than one card.
• Cards: Each card accepts an image (with alt text), title, description, and button.
• Button CTA: Provide label + URL (must start with http/https) and decide whether it opens in the same tab.
• Continue button: Customize the label that advances to the next block.
• Product pricing (Product Cards): Add Price, optional Compare-at price, optional Billing suffix (for example /mo), and optional Badge (for example Best value).
• Validation rule (Product Cards): If Compare-at price is set, Price is required.

Logic & routing

• Card/Carousel step supports a dedicated Jump destination (Pro) when the Continue button is clicked.
• Use per-card buttons to route outside the quiz and use Jump Logic for internal branching.
• Mention card variables or tags inside the Response Tags guide if you need to reuse selections.

Tips

• Keep card copy concise and align images with the CTA you expect respondents to take.
• Use Product Cards when you want to highlight savings by pairing Compare-at price with the current Price.
• When you need dynamic routing based on card responses, pair this block with the Agent Step or Jump Logic.
• Use the {{total_score}} placeholder if you also show scoring across other question blocks.