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.
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:Option | Description | Use Case |
---|---|---|
Yes | Always visible (default) | Standard content |
No | Removed from DOM | Hidden features, A/B tests |
Conditional | Show based on rules | Personalization, targeting |
Important for RAW elements: Setting visibility to “No” prevents scripts
from executing since the element isn’t rendered in the DOM.
Conditional Visibility
Create sophisticated display rules based on user data and context:
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)

- iOS
- Android
- Other (Desktop, etc.)
- Chrome
- Firefox
- Safari
- Instagram (in-app)
- Facebook (in-app)

- 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:
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 corners8px
= 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:Campaign-Specific Elements
Show elements for marketing campaigns:Troubleshooting
Element not showing despite visibility set to Yes
Element not showing despite visibility set to Yes
- Check if parent container is hidden
- Verify no conflicting conditional rules
- Ensure element isn’t outside screen bounds
- Check z-index if overlapped by other elements
Conditional visibility not working
Conditional visibility not working
- Conditions are evaluated on page load only
- Check condition syntax and values
- Test with exact values (case-sensitive)
- Verify URL parameters include the ? prefix
Styles not applying
Styles not applying
- Some styles are element-specific
- Check if Preserve Formatting is overriding
- Clear browser cache in preview
- Verify no custom CSS conflicts (RAW elements)
Element ID not creating variable
Element ID not creating variable
- Only stateful elements (inputs, etc.) create variables
- Variable name matches ID exactly
- Use
{{id-name}}
syntax in text - Variables update after user interaction
Next Steps
- RAW Element - Add custom HTML and JavaScript
- Button Element - Create compelling CTAs
- Input Elements - Collect user information
- Actions & Triggers - Make elements interactive