> ## Documentation Index
> Fetch the complete documentation index at: https://funnelfox.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Variables & dynamic content

> Use variables to personalize your funnels. Capture user inputs, URL parameters, and display dynamic content throughout the funnel flow.

Variables let you capture and display user data throughout your funnel. When
someone enters their name, selects their age group, or arrives with tracking
parameters - variables store these values so you can use them anywhere.

## How Variables Work

**User provides input → Variable stores it → You display it anywhere**

Variables are like personalized placeholders. They get replaced with actual
values when your funnel runs, creating unique experiences for each visitor.

<Info>
  **Most common use**: Showing users their own responses. "Thanks for your
  interest in the \{\{plan-type}} plan, \{\{name}}!" feels personal because it
  uses their actual selections.
</Info>

## Quick Example

```
User selects: "25-34" for age group
Variable created: {{age-group}}
You can now use: "80% of people in {{age-group}} love our product"
User sees: "80% of people in 25-34 love our product"
```

## Types of Variables

### User Input Variables

Created automatically when users interact with input elements:

<Tabs>
  <Tab title="Text Inputs & OAuth">
    **Element**: Text Input with ID "email" or OAuth button
    **Creates**: `{{email}}`
    **Contains**: Whatever user typed

    Example: User types "[john@example.com](mailto:john@example.com)" → `{{email}}` displays "[john@example.com](mailto:john@example.com)"
  </Tab>

  <Tab title="Options">
    **Element**: Options with ID "age-group"
    **Creates**: `{{age-group}}`
    **Contains**: Selected option's label

    Example: User selects "25-34 years" → `{{age-group}}` displays "25-34 years"

    Multiple selections become comma-separated: "Heart, Gift, Star"
  </Tab>

  <Tab title="Date Picker">
    **Element**: Date Picker with ID "birthday"
    **Creates**: `{{birthday}}`
    **Contains**: Selected date

    Format depends on locale:

    * European: DD-MM-YYYY
    * American: MM-DD-YYYY
  </Tab>
</Tabs>

### URL Query Variables

Automatically captured from your funnel URL:

```
URL: https://your-project.fnlfx.com/funnel?utm_campaign=summer&promo=SAVE20
```

Available variables:

* `{{query.utm_campaign}}` → "summer"
* `{{query.promo}}` → "SAVE20"

<Tip>
  **Testing hack**: Add `?title=New Headline Test` to your URL and use
  `{{query.title}}` in your funnel to quickly test different headlines
  without editing.
</Tip>

### System Variables

Built-in variables provided by FunnelFox:

| Variable              | What it contains   | Use case                    |
| --------------------- | ------------------ | --------------------------- |
| `{{user.id}}`         | Unique profile ID  | Track users across sessions |
| `{{user.session_id}}` | Current session ID | Debug specific visits       |

For understanding profiles vs sessions, see [Core Concepts](/getting-started/concepts#profiles-vs-sessions).

## Using Variables

### Text Elements & Lists

Type the variable name with double braces anywhere in your text:

```
Welcome back, {{name}}!

Based on your selection of {{plan-type}}, you'll save {{discount-amount}}.

Join {{percent}}% of {{age-group}} year olds who upgraded today!
```

### Actions

Use variables in action parameters:

<Tabs>
  <Tab title="External Links">
    Pass data to external sites:

    ```
    URL: https://example.com/signup?email={{email}}&plan={{plan-type}}
    ```
  </Tab>

  <Tab title="Purchase Actions">
    Pre-fill Stripe promo codes:

    ```
    Variable name: {{query.promo_code}}
    ```

    User arrives with `?promo_code=SAVE20` → Promo code field auto-fills
  </Tab>
</Tabs>

### Plan Pickers

Use variables in Plan Picker title, badge, and price:

```
Welcome Offer
Special for {{name}}
```

### Buttons

Use variables in button labels:

```
Continue as {{name}}
```

### Options

Use variables in option labels to personalize choices:

```
Recommended for {{age-group}}
```

### Timers

Use variables in timer button text to personalize urgency:

```
{{name}}, your offer expires in
```

### Processing Elements

Use variables as loader labels on processing elements:

```
Setting up your {{plan-type}} plan…
Creating your {{industry}} dashboard…
Almost done, {{name}}!
```

### Charts

Use variables in chart badges and axis labels:

```
Badge: {{age-group}}
X-axis label: Months since {{plan-type}} signup
```

### Raw HTML

Use variables inside Raw HTML elements:

```
<div id="greeting"></div>

<script>
    document.getElementById('greeting').textContent = 'Hello {{name}}'
</script>
```

### Screen Header Title

Use variables in the screen header title to personalize navigation:

```
Welcome, {{name}}
```

## Variable Rules

### Naming Requirements

✅ **Allowed:**

* Letters and numbers: `name`, `email2`, `step1`
* Hyphens and underscores: `first-name`, `user_age`
* URL-friendly characters only

❌ **Not allowed:**

* Spaces: `user name` won't work
* Special characters: `email@address` won't work
* Unicode: `用户名` won't work
* Reserved prefixes: `user`, `query`, `inputs`

### Case Sensitivity

Variables are case-sensitive:

* `{{name}}` ≠ `{{Name}}` ≠ `{{NAME}}`
* Be consistent with your element IDs

### Missing Variables

When a variable doesn't exist:

* The literal text `{{variable-name}}` displays
* Analytics logs a `variable_not_found` event
* User sees the brackets and all

<Warning>
  Always test your funnel flow to ensure variables are collected before
  they're used. You can't display `{{email}}` before the user provides it.
</Warning>

## Common Patterns

### Personalized Feedback

Show users how they compare to others like them:

```
"People in {{age-group}} who selected {{plan-type}} save an average of ${{savings}} per year"
```

### Progressive Profiling

Build understanding across screens:

1. Screen 1: Collect `{{industry}}`
2. Screen 2: "As someone in \{\{industry}}, you'll appreciate..."
3. Screen 3: Collect `{{company-size}}`
4. Screen 4: "\{\{industry}} companies with \{\{company-size}} employees typically..."

### Campaign Tracking

Maintain attribution throughout the funnel:

```
Arrived with: ?utm_source=facebook&utm_campaign=summer
Use throughout: "Exclusive {{query.utm_campaign}} offer for our {{query.utm_source}} community"
```

### Dynamic Testimonials

Match testimonials to user context:

```
"Just like you, Sarah was looking for a {{plan-type}} solution. 
She's now saving {{percent}}% on her {{category}} expenses."
```

## Relationship with Dynamic Actions

Variables and dynamic action states are closely related:

* **Variables**: Display data as text (`{{age-group}}` shows "25-34")
* **States**: Control flow logic (if age-group = "25-34", navigate to screen X)

Both use the same underlying data - user inputs create both a displayable
variable and a state for dynamic actions.

<Info>
  **Key difference**: Variables are for showing content, states are for
  controlling behavior. Same data, different purposes.
</Info>

## Limitations

### No Transformations

Variables display exactly as stored:

* Can't uppercase/lowercase
* Can't truncate or substring
* Can't format numbers
* Can't calculate with them

Need transformations? Use custom JavaScript.

### No Default Values

Variables don't support fallbacks:

* Can't do `{{name|"Friend"}}`
* Empty variables show as `{{name}}`
* No conditional display

Need defaults? Collect the data earlier or use custom code.

### Session Scope

Variables are bound to one session:

* Persist throughout the funnel visit
* Lost when session ends
* Can't pass between different funnels
* Restored if same session continues in new tab

## Best Practices

### Name Meaningfully

Use clear, descriptive IDs:

* ✅ `first-name`, `plan-type`, `budget-range`
* ❌ `input1`, `field2`, `var3`

### Test Your Flow

Always preview with test data:

1. Add test parameters to URL: `?name=Test&plan=Premium`
2. Go through entire funnel
3. Verify all variables display correctly
4. Check what happens with missing data

## Examples

### Personalized Pricing Page

```
URL: ?source=podcast&code=SAVE20

Headline: "Exclusive {{query.source}} listener discount!"
Subtext: "Use code {{query.code}} at checkout"
After selection: "You've chosen the {{plan}} plan"
Confirmation: "Thanks {{email}}, your {{plan}} plan is ready!"
```

### Quiz Funnel Personalization

```
Question 1: "What's your age?" → {{age-group}}
Question 2: "Main goal?" → {{goal}}
Question 3: "Experience level?" → {{level}}

Results page:
"Perfect! For someone in their {{age-group}}s looking to {{goal}}, 
with {{level}} experience, we recommend..."
```

### Multi-Step Form

```
Step 1: {{first-name}}, {{last-name}}, {{email}}
Step 2: "Hi {{first-name}}, let's set up your account..."
Step 3: "{{email}} will receive a confirmation..."
Final: "All done, {{first-name}} {{last-name}}!"
```

## Troubleshooting

<AccordionGroup>
  <Accordion title="Variable shows as {{variable}} instead of value">
    The variable doesn't exist yet. Check:

    * Element ID matches exactly (case-sensitive)
    * User has actually provided input before you use it
    * Query parameter exists in URL
    * No typos in variable name
  </Accordion>

  <Accordion title="Special characters not working">
    Variables must be URL-friendly:

    * Remove spaces (use hyphens or underscores)
    * Remove special characters
    * Use only letters, numbers, hyphens, underscores
  </Accordion>

  <Accordion title="Can't use 'user' as variable name">
    These are reserved prefixes:

    * `user` (for system variables)
    * `query` (for URL parameters)
    * `inputs` (for user inputs)

    Choose different names for your elements.
  </Accordion>
</AccordionGroup>

## Next Steps

* [Actions & Triggers](/editor/actions) - Use states for dynamic navigation
* [Element Reference](/elements/overview) - See which elements create variables
* [Custom Code](/editor/coding) - Transform variables with JavaScript