Overview

The Stories block renders a sequence of content items — images, videos, or fully custom blocks — each displayed for a configurable duration before automatically advancing to the next. A segmented progress bar at the top shows the user's position in the sequence and remaining time for the current story item. Users can tap left/right navigation arrows or swipe (on mobile) to jump to the previous or next item.

The format is familiar from social media stories and works well any time you want to present a short, sequential narrative that guides users through a set of information without requiring them to explicitly click through each step.

Story Item Types

Items Array

Each object in the items array defines one story slide:

Block-Level Properties

Setting Up an Onboarding Stories Flow

1. Drop the block and configure items: Drag Stories onto a full-width container (or a modal's body). Open the Items editor and add 3–5 items. For each: set type = custom, design the slot content with a feature illustration, headline, and body text.

2. Set timing: Set Default Duration = 8000 ms (8 seconds) for text-heavy slides. For image-only slides, set the individual duration to 4000ms. Enable Pause on Hover = true so desktop users can read without racing the timer.

3. Add a CTA on the last slide: On the final item, set CTA Label = "Get Started". Set CTA Action to a Navigate action pointing to the main workspace page. Also wire the onComplete event to the same Navigate action so keyboard/auto-advance users also proceed.

4. Mark onboarding complete: In the onComplete action chain, add a Set Variable action to set a hasCompletedOnboarding user preference variable to true. On the onboarding page's onLoad, add a condition that redirects to the workspace if the variable is already true — so returning users skip the flow.

Examples

Example: Product feature announcement

Render a 3-slide Stories block inside an announcement modal. Each slide is type image with a feature screenshot as src and a caption explaining the new capability. Set autoAdvance = false and showNavArrows = true — users navigate at their own pace. The CTA on the last slide links to the feature's help page.

Example: Seasonal promotion kiosk

Mount a full-screen Stories block with type image slides pulled from a CMS data source. Set loop = true, autoAdvance = true, defaultDuration = 6000, showNavArrows = false. The carousel runs indefinitely without user interaction — suitable for a lobby screen or kiosk display.

Example: Step-by-step configuration wizard

Use type custom for each slide with a form section inside. Set autoAdvance = false so users advance only by clicking the "Next" CTA button inside each custom slide. Use onItemChange to save partial form state to a page variable as users progress through the steps. The final slide's CTA submits the collected data to an API action.

Frequently Asked Questions

Can I navigate to a specific story item programmatically?

Yes. Use the Control Block action with Operation = goToItem and specify the target item ID or index. This is useful when an external button (e.g. a table of contents) should jump directly to a specific story slide. The progress bar updates to reflect the new position.

How do I pause the stories auto-advance when a video is playing?

For type = video items, auto-advance is automatically synchronized to the video duration if no duration is set on the item. The timer only starts after the video begins playing. If you set a fixed duration shorter than the video length, the story advances before the video finishes. To allow the full video to play, leave the item's duration unset and the block will use the video's ended event as the advance trigger.

Can the Stories block appear embedded in a page (not full-screen)?

Yes. The Stories block fills its parent container's dimensions, not the full viewport. Place it inside a Card, Container, or Modal and set an explicit height (e.g. 400px) on the container. The progress bar, navigation, and content all scale to the container size. The swipe gesture is scoped to the block — it does not conflict with page-level scrolling.

Related Pages