Widget steps (multi-step widgets)
Steps are the separate screens of a widget, such as an offer, a form and a thank-you message. Only one step is visible at a time, and visitors move between steps through button, image, form, survey, timer and wheel actions. Multi-step widgets let you ask a yes/no question before showing a form, split a long form, or reveal a discount code after a submission.
Available on: all widget types and platforms.
How it works
- The first step in the list is the default. When the widget opens, it shows the first step, unless the visitor left it on another step earlier (see Step persistence).
- Elements move the visitor between steps. Set an element's action to Go to step and pick the step. Buttons, linked images, forms, surveys, countdown timers and wheel-of-fortune segments can all change the step.
- The widget keeps its size settings. Width and the widget's own style are shared by all steps; each step has its own background, layout and padding.
Managing steps
Open Steps in the builder's left toolbar.
Action | How |
|---|---|
Add a step | Add step at the bottom of the list |
Rename | Click the step's name |
Duplicate | Clone on the step |
Delete | Remove on the step. A widget always keeps at least one step |
Reorder | Drag the handle on the left of a step. The step at the top becomes the default |
Edit | Click the step's thumbnail to show it on the canvas |
There's no limit on the number of steps.
Step settings
Select a step under Structure to edit its style:
Option | What it does |
|---|---|
Background, border, border radius, opacity | The step's surface, on top of the widget's own background |
Layout | Direction, justify, align, wrap and gap of the step's content |
Padding | Space between the step's edges and its content |
Step persistence
Personizely remembers the step a visitor reached, so a widget can pick up where they left off:
- When a visitor moves to another step, that step is saved in their browser.
- The next time the widget opens, on any page, it opens on the saved step instead of the first one.
- The saved step is cleared when the visitor converts (a Track widget conversion automation runs) or closes the widget. Minimizing to a teaser keeps it.
- After a Track widget completion automation runs, further step changes in that page view aren't saved.
In practice, persistence matters when a visitor navigates away while the widget is open, or minimizes it to its teaser. A visitor who reached the "Thank you" step and navigates away without closing will see "Thank you" next time; end the flow with a conversion, or add a Close widget action, to reset it.
To open the widget on a specific step from code, pass the step ID as the third argument of ply.showWidget(id, suppressRules, stepId). The Show widget automation always opens the default or saved step.
Behavior details and limitations
- Embedded widgets scroll into view when the step changes and the new step would be off-screen.
- Clicks that change steps count as clicks. A button or image whose action is Go to step records a click in the widget's stats. Buttons whose only action is Close widget don't. To measure how many visitors finish a flow, add a Track widget completion automation on the element that ends it; the report shows it as the Completion rate.
- Form actions run after the submission is saved. A form with Go to step moves to the next step once the submit succeeds.
- The teaser isn't a step. It's configured separately at the top of the Steps panel, for popups and callouts. See Teaser.
Examples
- Two-step opt-in (yes/no): step 1 asks "Want 10% off?" with a Yes button (Go to step 2) and a No thanks button (Close widget). Step 2 has the email form; its action goes to step 3 with the code.
- Spin to win: step 1 has a form whose action is Spin the wheel; each wheel segment goes to its own result step. See Wheel of fortune.