Variable System
Variables are the backbone of personalization, routing, and data capture in AppFunnel. Every piece of user data, quiz answer, product selection, and system state is a variable. When a variable changes, every component that references it updates immediately — no manual wiring required.
How Variables Work
Variables are key-value pairs organized into namespaces. You reference them with dot notation: namespace.key or namespace.subkey.property.
{{ answers.incomeGoal }}
{{ products.monthly.price }}
{{ device.isMobile }}The variable system is reactive. When a visitor selects a quiz answer, that value is stored in a variable. Any text element, condition, route, or style that references that variable re-evaluates instantly.
All user-created variables (answers.*, data.*, query.*, user.*) are automatically persisted across sessions. If a visitor closes the browser and returns later, their previous answers are restored. System and computed variables are recalculated on each session.
Variable Namespaces
AppFunnel organizes variables into namespaces based on their source and purpose.
User-Created Variables (Persistent)
These variables are saved to the visitor’s session and persist across visits.
| Namespace | Purpose | Created by | Examples |
|---|---|---|---|
answers.* | Quiz and survey responses | You | answers.incomeGoal, answers.experience, answers.interests |
data.* | App state and flags | You | data.showDiscount, data.discountTimerStart, data.selectedPlan |
query.* | URL parameters | You (values auto-populated from URL) | query.utm_source, query.ref, query.promo |
user.* | User identity | Auto-populated | user.email, user.name, user.dateOfBirth, user.stripeCustomerId |
Insert image: The Variable Panel in the left sidebar showing the list of user-created variables organized by namespace (answers, data, query, user), each with its name, type badge, and value
Response Variables (answers.*)
Created in the variable panel. These capture visitor input from quiz pages, forms, and interactive elements. Available types: string, number, boolean, stringArray.
When you add a Single Select or Multi Select element, a response variable is automatically created to store the selection.
Data Variables (data.*)
General-purpose state variables. Use these for internal app logic — toggling UI states, tracking timers, storing computed values from click actions.
Query Variables (query.*)
Populated automatically from URL parameters when a visitor lands on the funnel. Five UTM parameters are pre-configured:
query.utm_sourcequery.utm_mediumquery.utm_campaignquery.utm_contentquery.utm_term
You can add custom query variables (e.g., query.ref, query.promo) to capture additional URL parameters.
User Variables (user.*)
Identity fields for the visitor. Pre-configured defaults:
user.email— captured via an email input elementuser.name— captured via a name input elementuser.dateOfBirth— captured via a date input elementuser.stripeCustomerId— set automatically after a Stripe paymentuser.paddleCustomerId— set automatically after a Paddle payment
System Variables (Auto-Generated, Read-Only)
System variables are computed automatically by AppFunnel. You cannot set them directly — they reflect the current state of the visitor’s device, browser, session, and funnel progress.
Page (page.*)
| Variable | Type | Description | Updates |
|---|---|---|---|
page.current | number | One-based count of pages visited in this session | On page change |
page.currentIndex | number | Zero-based count of pages visited | On page change |
page.currentId | string | ID of the current page | On page change |
page.total | number | Expected total pages in the funnel path | On demand |
page.progressPercentage | number | Progress as a percentage (0-100) | On page change |
page.timeOnCurrent | number | Seconds spent on the current page | Every second |
page.startedAt | number | Timestamp when the current page was loaded | Every second |
Device (device.*)
| Variable | Type | Description |
|---|---|---|
device.isMobile | boolean | Whether the device is a mobile phone |
device.isTablet | boolean | Whether the device is a tablet |
device.type | string | "mobile", "tablet", or "desktop" |
device.screenWidth | number | Screen width in pixels |
device.screenHeight | number | Screen height in pixels |
device.viewportWidth | number | Viewport width in pixels |
device.viewportHeight | number | Viewport height in pixels |
device.pixelRatio | number | Device pixel ratio |
Browser (browser.*)
| Variable | Type | Description |
|---|---|---|
browser.name | string | Browser name (e.g., "Chrome", "Safari") |
browser.version | string | Browser version string |
browser.language | string | Browser language code (e.g., "en") |
browser.online | boolean | Whether the browser has internet connectivity |
browser.cookieEnabled | boolean | Whether cookies are enabled |
OS (os.*)
| Variable | Type | Description |
|---|---|---|
os.name | string | Operating system name (e.g., "iOS", "Windows") |
os.version | string | Operating system version |
os.platform | string | Platform identifier |
os.timezone | string | System timezone (e.g., "America/New_York") |
Session (session.*)
| Variable | Type | Description |
|---|---|---|
session.startedAt | number | Timestamp when the session began |
Purchase (purchase.*)
| Variable | Type | Description |
|---|---|---|
purchase.status | string | Purchase status |
purchase.success | boolean | Whether the purchase completed successfully |
purchase.cancelled | boolean | Whether the purchase was cancelled |
purchase.amount | number | Purchase amount |
purchase.currency | string | Purchase currency code |
purchase.mode | string | "payment" or "subscription" |
Payment (payment.*)
| Variable | Type | Description |
|---|---|---|
payment.loading | boolean | Whether a payment operation is in progress |
payment.error | string | Error message from the last payment operation |
payment.intentId | string | Stripe PaymentIntent ID after a charge |
Product Variables (Computed from Price Data)
Product variables give you access to all pricing and subscription details for the products configured in your funnel. Products are accessed by name, not by index.
{{ products.monthly.price }} → "$9.99"
{{ products.yearly.period }} → "year"
{{ products.selected.trialDays }} → 7The special products.selected namespace always refers to the currently selected product.
See the Product Variable Reference for all properties (pricing, currency, billing period, trial, etc.).
Where Variables Are Used
Variables appear throughout the platform:
- Liquid Templates — Dynamic text in text elements, HTML blocks, custom CSS, and event payloads.
- Conditions — Routing rules, dynamic properties, active style triggers, and visibility.
- Click Actions — Set Variable, Toggle Array Item, and Select Product actions modify variables directly.
- Input Bindings — Input, Switch, Single Select, and Multi Select components bind to variables automatically.
Next Steps
- Learn Liquid template syntax for rendering dynamic content
- Understand conditions for routing and visibility logic
- See practical recipes for common patterns