Page Actions
Page Actions let you trigger actions automatically based on page-level events — without the user clicking anything. Use them for timed popups, scroll-triggered animations, lazy-loading behavior, and any other automation that should fire when a page event occurs.
How It Works
Each page can have one or more Page Actions. Every action has a trigger, an optional delay, optional conditions, and an action chain (the same action types available in Click Actions).
Open the Page Actions tab in the left sidebar to manage actions for the currently selected page.
Triggers
On Page Load
onPageLoad — Fires when the page finishes loading and rendering.
Use this for:
- Showing a welcome dialog after a short delay
- Setting a variable when the user reaches a specific page
- Firing a tracking event on page entry
On Scroll Percentage
onScrollPercentage — Fires when the user scrolls past a given percentage of the page height (0–100).
| Config | Type | Description |
|---|---|---|
percentage | number (0–100) | The scroll threshold that triggers the action |
Use this for:
- Showing a sticky CTA after the user scrolls 50%
- Firing an engagement event when the user reaches the bottom
When Element In View
onElementInView — Fires when a specific component scrolls into the viewport.
| Config | Type | Description |
|---|---|---|
componentId | string | The target component. Select it from the dropdown in the editor. |
Use this for:
- Lazy-loading content when a section becomes visible
- Starting an animation or counter when the user scrolls to it
Configuration
Delay
Every Page Action has a delay field (in milliseconds). The delay is applied after the trigger fires and before the actions execute. Set it to 0 for immediate execution.
Example: Show a dialog 2 seconds after page load → trigger = onPageLoad, delay = 2000.
Fire Only Once Per Visit
When enabled (the default), the action fires at most once per page visit. If the user scrolls back and forth past a scroll threshold, it won’t re-trigger.
Disable this if you want the action to fire every time the trigger condition is met — for example, re-showing a tooltip each time the user scrolls to a section.
Conditions
Add conditions to make the action fire only when specific variable states are met. This uses the same Condition Builder as routing rules.
Example: Only show a discount dialog if data.hasSeenDiscount is false:
- Trigger:
onPageLoad - Delay:
3000 - Condition:
data.hasSeenDiscountequalsfalse - Action:
setVariable → element.{dialogId}.open = true
Actions
Page Actions use the same action types as Click Actions. You can chain multiple actions — they execute sequentially, and each action supports an onFailure chain.
Common patterns:
- Open a dialog:
setVariable → element.{dialogId}.open = true - Fire a tracking event:
callEvent → "scroll_engagement" - Set a flag:
setVariable → data.hasSeenDiscount = true - Navigate:
goToNextPage(e.g., auto-advance after a timer)
Examples
Timed welcome popup
Show a dialog 3 seconds after the page loads, but only once:
| Setting | Value |
|---|---|
| Trigger | On page load |
| Delay | 3000 |
| Once | Yes |
| Action | setVariable → element.welcomeDialog.open = true |
Scroll-triggered CTA
Show a sticky banner when the user scrolls past 60%:
| Setting | Value |
|---|---|
| Trigger | On scroll 60% |
| Delay | 0 |
| Once | Yes |
| Condition | data.showBanner equals false |
| Actions | setVariable → data.showBanner = true, callEvent → "banner_shown" |
Auto-advance after animation
Automatically go to the next page 4 seconds after load (e.g., after a spinner wheel finishes):
| Setting | Value |
|---|---|
| Trigger | On page load |
| Delay | 4000 |
| Once | Yes |
| Action | goToNextPage |