Elements are the fundamental building blocks of your funnels. From simple text and images to complex forms and payment buttons, elements let you create engaging, conversion-optimized experiences without writing code.

Adding Elements

Drag elements from the left panel onto your screen in the Visual Editor. Each element automatically adapts to mobile and desktop views while maintaining your design intent.
Elements panel in Visual Editor

Common Properties

Every element shares these foundational properties that control identification, visibility, and behavior.

Element Tab

ID

Unique identifier for the element. Auto-generated but customizable. Why IDs matter:
  • Variables: Stateful elements (inputs, dropdowns, etc.) with IDs create variables
  • JavaScript access: Target with document.getElementById('element-id')
  • Analytics tracking: Track specific element interactions
  • Dynamic actions: Reference in show/hide actions
Use descriptive IDs like email-input or submit-button for easier maintenance and debugging.

Visibility

Control when and how elements appear:
OptionDescriptionUse Case
YesAlways visible (default)Standard content
NoRemoved from DOMHidden features, A/B tests
ConditionalShow based on rulesPersonalization, targeting
Important for RAW elements: Setting visibility to “No” prevents scripts from executing since the element isn’t rendered in the DOM.
See Conditional Visibility below for detailed rules and options.

Conditional Visibility

Create sophisticated display rules based on user data and context:
Conditional visibility options

Condition Types

Input Value Check user inputs or variables against conditions:
  • Equals, Not equals
  • Greater than, Less than
  • Contains, Does not contain
  • Empty, Not empty
  • Is one of (multiple values)
Input value condition
Country Show/hide based on visitor’s location (geo-IP):
Example: Show EU-specific privacy notice only to European visitors
Device OS Target specific platforms:
  • iOS
  • Android
  • Other (Desktop, etc.)
Browser Detect visitor’s browser:
  • Chrome
  • Firefox
  • Safari
  • Instagram (in-app)
  • Facebook (in-app)
URL Parameter Check for query parameters in the URL:
URL parameter condition
URL: funnel.com?utm_campaign=promo
Condition: ?utm_campaign contains "promo"
Result: Element shows
Available Payment Methods Show elements based on payment capabilities:
  • Primarily for Apple Pay availability
  • Useful for payment method selectors

Combining Conditions

Add multiple conditions with logical operators:
  • All conditions must be true (AND logic)
  • Any condition must be true (OR logic)

Styles Tab

Common styling properties available for all elements:
Styles tab properties

Container Styles

Offset

Position adjustment relative to default placement:
  • Horizontal offset (px)
  • Vertical offset (px)

Position

How the element is positioned:
  • In content: Normal document flow
  • Attached: Fixed position - stays visible in viewport (e.g., sticky button at bottom)
  • Attached on scroll: Becomes fixed after scrolling into view (sticky behavior)

Padding

Internal spacing between content and element border:
  • Top, Right, Bottom, Left (px)
  • Use for breathing room around content

Visual Styles

Background

  • Color: Solid background color with opacity
  • Gradient: Two-color gradients (if supported)
  • Image: Background images for containers

Roundness

Corner radius in pixels:
  • 0px = Sharp corners
  • 8px = Slightly rounded (modern)
  • 100px = Pill-shaped (for buttons)

Border

  • Width: Border thickness (px)
  • Color: Border color with opacity
  • Style: Solid, dashed, dotted (element-specific)

Shadow

Add depth with shadows:
  • Toggle on/off
  • Customize shadow properties (element-specific)
  • “Show less” for preset shadows
  • Expand for detailed control

Geo-Targeted Offers

Personalize based on location:
US Visitors: Show USD pricing
EU Visitors: Show EUR pricing + VAT notice
UK Visitors: Show GBP pricing

Campaign-Specific Elements

Show elements for marketing campaigns:
URL: funnel.com?promo=summer50
Show: Special offer banner with code

Troubleshooting

Next Steps