Elements
Plan Picker Element
High-converting paywall component for subscription and billing period selection
The Plan Picker element creates optimized paywalls that maximize conversion
rates through clear pricing presentation and friction-free selection. It’s the
go-to element for subscription apps to present pricing options.
Use conditional visibility on individual plans.
Use in Logic
When to Use
Essential for:- Paywalls - Primary subscription selection
- Pricing pages - Multiple plan comparison
- Billing period choice - Monthly vs annual selection
- Upsell screens - Upgrade to premium tiers
- Trial offers - Free trial with plan pre-selection
Plan Picker is specifically designed for subscription products. For one-time
purchases or simple price selection, use Price Picker.
How It Works
The Plan Picker is a container element that holds individual Plan components. Each Plan represents a subscription option with its own pricing, features, and billing period.Creating Plans
Adding Plans
1
Add Plan Picker
Drag Plan Picker element onto your page
2
Add Individual Plans
Click ”+” to add Plan elements inside the picker
3
Configure Each Plan
Set product, pricing, and features for each plan
4
Set Default Selection
Choose which plan is pre-selected (usually best value)
Plan Configuration
Each plan within the picker has: Essential Settings- Product - Link to product in dashboard
- Custom ID - For tracking and logic
- Checkout link - Direct purchase URL (optional)
- Price text - “$9.99/month” (supports variables)
- Old price - Strike-through for discounts
- Badge - “BEST VALUE”, “POPULAR”, “SAVE 50%”
- Badge Type - Success (green), Danger (red), Warning (yellow)
- Default selected - Pre-select recommended plan
Paywall Best Practices
The 3-Plan Strategy
Most effective paywall structure:Pre-selecting the annual plan increases revenue by 30-40% compared to
monthly default selection.
Pricing Psychology
Anchoring Show most expensive option first or last to make others seem reasonable Decoy Effect Make middle option most attractive by comparison Loss Aversion Show crossed-out “regular” prices to emphasize savingsBadge Strategy
Use badges strategically:| Badge Text | Color | Psychology | Conversion Impact |
|---|---|---|---|
| BEST VALUE | Green | Logical choice | +15-20% |
| MOST POPULAR | Blue | Social proof | +10-15% |
| SAVE 50% | Red | Urgency/savings | +20-25% |
| LIMITED TIME | Orange | Scarcity | +25-30% |
Mobile Optimization
Plan Picker adapts perfectly to mobile: Vertical Stacking- Plans stack vertically on small screens
- Full-width touch targets
- Clear visual separation
- Native radio buttons for clarity
- Single tap to select
- Visual feedback on selection
- Large price display
- Readable feature lists
- High contrast badges
On mobile, limit to 2-3 plans maximum. Too many options cause
decision paralysis and reduce conversions.
Dynamic Pricing
Using Variables
Display dynamic prices based on user data:Checkout Integration
Two checkout approaches: Integrated Checkout- User selects plan in Plan Picker
- Navigates to page with Checkout element
- Checkout uses selected product automatically
- Each plan has checkout link
- Clicking plan goes directly to payment
- Faster but less flexible
Advanced Features
Conditional Plans
Show different plans based on user segments:Feature Comparison
While Plan Picker shows basic features, combine with other elements for detailed comparison:- Plan Picker for selection
- List element below for feature details
- FAQ element for questions
Trial Emphasis
For trial-focused funnels:Stateful Behavior
Plan Picker is stateful - the selected plan is saved and accessible: Variable Access- Route to different success pages
- Show plan-specific onboarding
- Customize confirmation emails
Conversion Optimization
Reduce Friction
- Single selection - Radio buttons, not checkboxes
- Clear CTAs - “Start Free Trial” not “Submit”
- Instant feedback - Visual selection confirmation
- No surprises - Show total price including tax
Build Trust
- Money-back guarantee - Below plans
- Customer count - “Join 50,000+ users”
- Security badges - Payment provider logos
- Reviews - Star rating or testimonial
Create Urgency
- Limited time offers - Countdown timer above
- Spots remaining - “Only 10 left at this price”
- Price increase notice - “Price goes up in 2 days”
- Exclusive access - “Early bird pricing”
Common Patterns
Freemium to Paid
Good-Better-Best
Single Plan Focus
Sometimes one plan with billing period choice:Testing Strategies
A/B Test Variables
Test these elements for conversion impact:- Default selection - Monthly vs Annual
- Number of plans - 2 vs 3 options
- Badge text - “POPULAR” vs “BEST VALUE”
- Price display - “10”
- Trial emphasis - Leading with trial vs price
Preview Mode Testing
In preview mode:- Test plan selection flow
- Verify variable storage
- Check responsive design
- Test checkout integration
Troubleshooting
Plans not selectable
Plans not selectable
- Ensure plans have unique IDs
- Check radio button functionality
- Verify no JavaScript errors
- Look for CSS conflicts
Selected plan not passing to checkout
Selected plan not passing to checkout
- Plan Picker must have an ID
- Checkout must have “Product from replies” enabled
- Verify plan IDs match products
- Check variable is set correctly
Badges not showing
Badges not showing
- Badge text must be non-empty
- Check badge type is selected
- Verify no visibility conditions hiding it
- Look for theme conflicts
Mobile layout issues
Mobile layout issues
- Plans should stack automatically
- Check for fixed widths in custom CSS
- Verify responsive breakpoints
- Test in actual mobile browsers
Paywall Examples
Subscription App
SaaS Product
Next Steps
- Configure products for your plans
- Add checkout for payment processing
- Set up analytics to track conversions
- Create experiments to test variations