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

# Page Variables & Placeholders

> Use dynamic variables and placeholders to personalize your pages with customer data, dates, query parameters, and more

Page variables and placeholders allow you to dynamically insert content into your pages. They're automatically replaced with actual values when the page is rendered, making it easy to personalize content for each visitor.

## Variable Formats

Use **double curly braces** for variables:

* **Template format**: `{{ variable.path }}` — Use a path to the value (e.g. `{{ query.campaign }}`, `{{ customer.name }}`).

This format works in HTML content and in JavaScript code. Date and time placeholders use the percent format (e.g. `%DAY_NAME%`, `%YEAR%`) as shown in the Date Variables section below.

## Date Variables

Display current date and time information using these placeholders:

### `%DAY_NAME%`

Full name of the day of the week.

**Example**: "Monday", "Tuesday", "Wednesday"

```html theme={null}
<p>Today is %DAY_NAME%</p>
<!-- Output: Today is Monday -->
```

### `%DAY%`

Day of the month (1-31).

**Example**: 1, 15, 31

```html theme={null}
<p>Today is the %DAY%</p>
<!-- Output: Today is the 15 -->
```

### `%DAY_POSTFIX%`

Ordinal suffix for the day (st, nd, rd, th).

**Example**: "st", "nd", "rd", "th"

```html theme={null}
<p>Today is the %DAY%%DAY_POSTFIX%</p>
<!-- Output: Today is the 15th -->
```

### `%MONTH_NAME%`

Full name of the month.

**Example**: "January", "February", "March"

```html theme={null}
<p>It's %MONTH_NAME%</p>
<!-- Output: It's January -->
```

### `%MONTH%`

Month number (0-11, where 0 = January).

**Example**: 0, 5, 11

```html theme={null}
<p>Month number: %MONTH%</p>
<!-- Output: Month number: 0 -->
```

### `%YEAR%`

Full 4-digit year.

**Example**: 2024, 2025

```html theme={null}
<p>Copyright %YEAR%</p>
<!-- Output: Copyright 2024 -->
```

### `%HOUR%`

Current hour in 24-hour format (0-23).

**Example**: 0, 14, 23

```html theme={null}
<p>Current hour: %HOUR%</p>
<!-- Output: Current hour: 14 -->
```

### Complete Date Example

```html theme={null}
<div class="date-display">
  <p>Today is %DAY_NAME%, %MONTH_NAME% %DAY%%DAY_POSTFIX%, %YEAR%</p>
  <p>Current time: %HOUR%:00</p>
</div>
<!-- Output: Today is Monday, January 15th, 2024 -->
<!-- Output: Current time: 14:00 -->
```

## Customer Variables

Display customer information when a customer session exists.

### `%CUSTOMER_FNAME%`

Customer's first name from session.

```html theme={null}
<p>Hello, %CUSTOMER_FNAME%!</p>
<!-- Output: Hello, John! -->
```

### `%CUSTOMER_FNAME%,`

Customer's first name with a trailing comma. The comma is removed if no first name is available.

```html theme={null}
<p>Welcome%CUSTOMER_FNAME%, to our store!</p>
<!-- With name: Welcome John, to our store! -->
<!-- Without name: Welcome to our store! -->
```

### `{{ customer_name }}`

Customer's full name. Works in both HTML and JavaScript.

```html theme={null}
<h1>Welcome, {{ customer_name }}!</h1>

<script>
  console.log('Customer: {{ customer_name }}');
</script>
```

**Note**: This variable is populated from order data. If no orders exist, it will be empty.

### `{{ customer.* }}` Variables

Access detailed customer information using the `{{ customer.* }}` format. These variables are populated from the customer's most recent conversion/purchase.

**Personal Information:**

* `{{ customer.email }}` - Customer email address
* `{{ customer.name }}` - Full name
* `{{ customer.first_name }}` - First name
* `{{ customer.last_name }}` - Last name
* `{{ customer.phone }}` - Phone number
* `{{ customer.country }}` - Country

**Address Information:**

* `{{ customer.address }}` - Street address
* `{{ customer.city }}` - City
* `{{ customer.state }}` - State/Province
* `{{ customer.zip }}` - ZIP/Postal code

**Billing Information:**

* `{{ customer.billing_address }}` - Billing street address
* `{{ customer.billing_city }}` - Billing city
* `{{ customer.billing_state }}` - Billing state
* `{{ customer.billing_zip }}` - Billing ZIP code
* `{{ customer.billing_country }}` - Billing country

**Shipping Information:**

* `{{ customer.shipping_address }}` - Shipping street address
* `{{ customer.shipping_city }}` - Shipping city
* `{{ customer.shipping_state }}` - Shipping state
* `{{ customer.shipping_zip }}` - Shipping ZIP code
* `{{ customer.shipping_country }}` - Shipping country

**Order History:**

* `{{ customer.total_orders }}` - Total number of orders
* `{{ customer.last_order_date }}` - Date of most recent order
* `{{ customer.last_order_total }}` - Total amount of most recent order
* `{{ customer.last_order_currency }}` - Currency of most recent order
* `{{ customer.order_ids }}` - Comma-separated list of order IDs

**Special Variables:**

* `{{ customer.email_hashed }}` - SHA-256 hashed email (for privacy/analytics)

### Customer Variable Examples

```html theme={null}
<!-- Personalization -->
<h1>Welcome back, {{ customer.first_name }}!</h1>
<p>Your email: {{ customer.email }}</p>

<!-- Address display -->
<div class="shipping-info">
  <p>{{ customer.shipping_address }}</p>
  <p>{{ customer.shipping_city }}, {{ customer.shipping_state }} {{ customer.shipping_zip }}</p>
</div>

<!-- Order history -->
<p>You have {{ customer.total_orders }} order(s)</p>
<p>Last order: {{ customer.last_order_date }}</p>

<!-- In JavaScript -->
<script>
  const customerEmail = '{{ customer.email }}';
  const orderCount = '{{ customer.total_orders }}';
</script>
```

**Important Notes:**

* Customer variables require a valid customer session (email or `is_customer` flag)
* If no session exists, customer variables are removed from the page
* Variables are populated from the most recent conversion/purchase
* Empty values are replaced with empty strings

## Brand & System Variables

Display brand information and system-level data that's available on all pages.

### `{{ brand_name }}`

Your brand/company name.

```html theme={null}
<h1>Welcome to {{ brand_name }}</h1>
<!-- Output: Welcome to My Company -->

<footer>
  <p>{{ brand_name }} - All rights reserved</p>
</footer>
```

### `{{ domain }}`

Current domain name.

```html theme={null}
<p>Visit us at {{ domain }}</p>
<!-- Output: Visit us at example.com -->

<a href="https://{{ domain }}">Home</a>
<!-- Output: <a href="https://example.com">Home</a> -->
```

### `{{ click_id }}`

Click tracking ID for the current session.

```html theme={null}
<!-- Pass click ID to tracking -->
<script>
  const clickId = '{{ click_id }}';
  // Use for analytics or tracking
</script>

<!-- In URLs -->
<a href="/checkout?c={{ click_id }}">Buy Now</a>
```

### IP & Location Variables

Access visitor IP address and location information (when available).

#### `{{ ip_whois.ip }}`

Visitor's IP address.

```html theme={null}
<!-- Display IP (usually for debugging) -->
<p>Your IP: {{ ip_whois.ip }}</p>
```

#### `{{ ip_whois.country }}`

Visitor's country based on IP geolocation.

```html theme={null}
<p>Country: {{ ip_whois.country }}</p>
<!-- Output: Country: United States -->
```

#### `{{ ip_whois.city }}`

Visitor's city based on IP geolocation.

```html theme={null}
<p>City: {{ ip_whois.city }}</p>
<!-- Output: City: New York -->
```

#### `{{ ip_whois.region }}`

Visitor's region/state based on IP geolocation.

```html theme={null}
<p>Region: {{ ip_whois.region }}</p>
<!-- Output: Region: New York -->
```

**Important Notes:**

* IP geolocation data is approximate and may not be 100% accurate
* Location data is only available when `{{ ip_whois.* }}` variables are used in the page
* IP address is always available, but country/city/region require geolocation lookup
* Use these variables responsibly and in compliance with privacy regulations

### Custom Brand Variables (`{{ var.* }}`)

Access custom variables defined in your brand settings using dot notation.

**Format**: `{{ var.path.to.variable }}`

**Default Values**: `{{ var.path.to.variable=default_value }}`

Custom brand variables are defined in your brand settings as JSON. You can access nested values using dot notation.

**Example Brand Variables JSON:**

```json theme={null}
{
  "company": {
    "name": "My Company",
    "phone": "1-800-123-4567",
    "email": "support@example.com"
  },
  "social": {
    "facebook": "https://facebook.com/mycompany",
    "twitter": "https://twitter.com/mycompany"
  },
  "settings": {
    "shipping_days": 5,
    "return_policy": "30 days"
  }
}
```

**Usage Examples:**

```html theme={null}
<!-- Access nested values -->
<p>Company: {{ var.company.name }}</p>
<!-- Output: Company: My Company -->

<p>Phone: {{ var.company.phone }}</p>
<!-- Output: Phone: 1-800-123-4567 -->

<a href="{{ var.social.facebook }}">Facebook</a>
<!-- Output: <a href="https://facebook.com/mycompany">Facebook</a> -->

<p>Shipping: {{ var.settings.shipping_days }} days</p>
<!-- Output: Shipping: 5 days -->
```

**Default Values:**

If a variable doesn't exist, you can provide a default value:

```html theme={null}
<!-- Use default if variable doesn't exist -->
<p>Phone: {{ var.company.phone=Not available }}</p>
<!-- If var.company.phone exists: Phone: 1-800-123-4567 -->
<!-- If it doesn't exist: Phone: Not available -->

<p>Support: {{ var.support.email=support@example.com }}</p>
```

**Important Notes:**

* Custom variables are defined in your brand settings
* Use dot notation to access nested values
* Variables work in HTML, head HTML, and JavaScript
* If a variable doesn't exist and no default is provided, you'll see: `<ef-undefined>undefined: var.path</ef-undefined>`
* Default values are only used when the variable is undefined

### Brand Variable Examples

```html theme={null}
<!-- Footer with brand info -->
<footer>
  <div class="company-info">
    <h3>{{ brand_name }}</h3>
    <p>Domain: {{ domain }}</p>
    <p>Phone: {{ var.company.phone }}</p>
    <p>Email: {{ var.company.email }}</p>
  </div>
  
  <div class="social-links">
    <a href="{{ var.social.facebook }}">Facebook</a>
    <a href="{{ var.social.twitter }}">Twitter</a>
  </div>
  
  <p>© {{ brand_name }} %YEAR%</p>
</footer>

<!-- Tracking with click ID -->
<script>
  // Track page view
  gtag('event', 'page_view', {
    'click_id': '{{ click_id }}',
    'domain': '{{ domain }}',
    'brand': '{{ brand_name }}'
  });
</script>
```

## Query Parameter Variables

Access URL query parameters to personalize content based on traffic source, campaigns, or other URL data.

### `{{ query.* }}`

Access any query parameter from the URL.

**Format**: `{{ query.parameter_name }}`

**Example URL**: `https://yoursite.com/page?aff_id=123&source=facebook`

```html theme={null}
<p>Affiliate ID: {{ query.aff_id }}</p>
<!-- Output: Affiliate ID: 123 -->

<p>Source: {{ query.source }}</p>
<!-- Output: Source: facebook -->
```

### `{{ queryparams }}`

Get the complete query string for use in URLs.

```html theme={null}
<a href="/checkout?{{ queryparams }}">Checkout</a>
<!-- Output: <a href="/checkout?aff_id=123&source=facebook">Checkout</a> -->
```

### Query Parameter Examples

```html theme={null}
<!-- Track affiliate -->
<p>Referred by: {{ query.aff_id }}</p>

<!-- Campaign tracking -->
<div data-campaign="{{ query.utm_campaign }}">
  Campaign content
</div>

<!-- Pass parameters to checkout -->
<a href="/checkout?{{ queryparams }}">Buy Now</a>

<!-- Conditional content based on parameter -->
<script>
  const source = '{{ query.source }}';
  if (source === 'email') {
    // Show email-specific content
  }
</script>
```

**Important Notes:**

* Query parameters are case-sensitive
* If a parameter doesn't exist, the variable is replaced with an empty string
* All query parameter values are automatically escaped for security
* Unused query parameter variables are cleaned up automatically

## Request & device context

Request and device fields are available in the **backend template engine** (server-side). They use the same data as [Script Rule](/funnels/script-rule), so you can show or hide content by device, customer status, referrer, and merchant.

Use **`request.*`** in conditions and output, or **`is_mobile`** / **`is_tablet`** at the top level (same names as in script rules).

### In template conditionals (`@if`)

```html theme={null}
@if(request.is_mobile)
  <p>You're on mobile — tap here to buy.</p>
@endif

@if(request.is_mobile)
  <!-- mobile -->
  <div class="mobile-cta">Tap to buy</div>
@else
  <!-- desktop -->
  <div class="desktop-cta">Click to buy</div>
@endif

@if(is_mobile && !is_tablet)
  <p>Phone-only offer.</p>
@endif

@if(request.is_customer)
  <p>Welcome back!</p>
@endif
```

### In output (`{{ }}`)

```html theme={null}
<p>Device: {{ request.device.type }}</p>
<p>Mobile: {{ request.is_mobile }}</p>
<p>Referrer: {{ request.referrer }}</p>
```

### Available request fields

| Variable                               | Type    | Description                                                                          |
| -------------------------------------- | ------- | ------------------------------------------------------------------------------------ |
| `request.is_mobile`                    | Boolean | Visitor is on a mobile device                                                        |
| `request.is_tablet`                    | Boolean | Visitor is on a tablet                                                               |
| `request.device`                       | Object  | Device info: `type`, `user_agent`, `vendor`, `model`, `os`, `browser` (name/version) |
| `request.query`                        | Object  | URL query parameters (same as `{{ query.* }}`)                                       |
| `request.is_customer`                  | Boolean | Visitor has made a purchase                                                          |
| `request.referer` / `request.referrer` | String  | Referrer URL                                                                         |
| `request.merchant_code`                | String  | Active payment processor code (e.g. `buygoods`, `stripe`)                            |

### Top-level parity with script rules

For the same naming as in [Script Rule](/funnels/script-rule), **`is_mobile`** and **`is_tablet`** are also available at the top level (no `request.` prefix):

```html theme={null}
@if(is_mobile)
  <div class="mobile-cta">...</div>
@endif
```

## Variable Usage Tips

### Combining Variables

You can combine multiple variables for rich personalization:

```html theme={null}
<p>Hello %CUSTOMER_FNAME%, today is %DAY_NAME%, %MONTH_NAME% %DAY%%DAY_POSTFIX%</p>
<!-- Output: Hello John, today is Monday, January 15th -->
```

### Conditional Display

Use variables with CSS or JavaScript for conditional display:

```html theme={null}
<!-- Hide if no customer name -->
<div id="welcome" style="display: {{ customer.name ? 'block' : 'none' }}">
  Welcome, {{ customer.name }}!
</div>

<!-- JavaScript conditional -->
<script>
  if ('{{ customer.email }}') {
    console.log('Customer logged in');
  }
</script>
```

### Security Considerations

* All variable values are automatically escaped to prevent XSS attacks
* Customer data is only shown to authenticated customers
* Query parameters are sanitized before use
* Empty variables are safely removed

### Performance

* Variables are replaced server-side during page rendering
* No client-side processing required
* Variables that don't exist are efficiently removed

## Troubleshooting

### Variables Not Showing

**Issue**: Variable appears as literal text (e.g., `%DAY_NAME%` instead of "Monday")

**Solutions:**

* Check spelling and case sensitivity
* Ensure you're using double curly braces: `{{ variable.path }}`
* Verify the variable name matches exactly

### Customer Variables Empty

**Issue**: `{{ customer.* }}` variables are empty or removed

**Solutions:**

* Ensure visitor has a customer session (email or `is_customer` flag)
* Check that customer has made at least one purchase
* Verify the variable name is correct

### Query Parameters Not Working

**Issue**: `{{ query.* }}` variables are empty

**Solutions:**

* Verify the parameter exists in the URL
* Check parameter name spelling (case-sensitive)
* Ensure the URL includes `?parameter=value` format

## Related Documentation

* [Order Tag](/pages/order-tag) - Display customer order history
* [Product Item Tag](/pages/product-item-tag) - Display product listings
* [Collection Item Tag](/pages/collection-item-tag) - Display collection entries