Modal Designer
Create beautiful popups that actually convert. Visual editor, smart triggers, no coding required.
Modals (aka popups or overlays) are powerful tools for capturing attention. When done right, they can boost conversions by 50%+! ✨
What Are Modals Good For?
Creating a Modal
Go to Modals
Click Modals in your dashboard sidebar.
Create New Modal
Click "Create New Modal" button.
Choose Template or Start Blank
Templates available:
- Newsletter Signup
- Exit Intent Offer
- Announcement
- Discount Code
- Lead Magnet
- Cookie Consent
- Blank Modal
Design Your Modal
Use the Visual Editor to:
- Add text, images, buttons
- Customize colors and fonts
- Adjust size and positioning
- Preview on different devices
Modal Components
Text Elements
- Headlines (H1-H6)
- Paragraphs
- Lists (bulleted, numbered)
Media
- Images (upload or URL)
- Videos (YouTube, Vimeo embed)
- Icons
Forms
- Email capture
- Multi-field forms
- Checkboxes for consent
Buttons
- Call-to-action buttons
- Close button
- Multiple button styles
Design Elements
- Background colors/images
- Borders and shadows
- Spacing and padding
Trigger Options
Control when your modal appears:
Page Load
Show immediately when page loads
- Delay: Wait X seconds before showing
- Example: Welcome message after 2 seconds
Exit Intent
Detect when user is about to leave
- Mouse moves toward browser close button
- Example: "Wait! Here's 10% off"
Scroll Depth
Trigger after scrolling X%
- Example: Show after 50% scroll
- Good for engaged visitors
Time on Page
Show after X seconds on page
- Example: After 30 seconds
- Indicates real interest
Click Trigger
Show when specific element clicked
- Example: "Learn More" button opens modal
- Full control over timing
Inactivity
After X seconds of no mouse/keyboard activity
- Example: "Still there? Need help?"
- Re-engage idle visitors
Pro Tip: Exit intent modals can recover up to 15% of abandoning visitors!
Display Frequency
Control how often users see your modal:
Show Once
- One time per visitor (uses cookies)
- Good for announcements
Show Every Visit
- Every time they visit
- Use sparingly to avoid annoyance
Show Every X Days
- Once per day, week, or month
- Balanced approach
Show Until Action
- Keep showing until they submit/click
- Use for important updates
Styling & Customization
Size Options
- Small: 400px wide (email capture)
- Medium: 600px wide (most common)
- Large: 800px wide (detailed content)
- Full Screen: Covers entire viewport
Position
- Center (default)
- Top
- Bottom
- Left/Right slide-in
Animations
- Fade In: Smooth appearance
- Slide Down: From top
- Slide Up: From bottom
- Zoom In: Grows from center
- None: Instant display
Overlay
- Dark: Semi-transparent black
- Light: Semi-transparent white
- Blur: Blurs background
- None: No overlay
Close Options
- X button (top-right)
- Click outside to close
- ESC key to close
- No close button (force interaction)
Making it hard to close modals frustrates users. Always provide an easy exit!
Advanced Features
A/B Testing
Test different designs:
- Create variant modals
- Split traffic 50/50
- Track which converts better
- Winner takes all
Targeting Rules
Show different modals to different visitors:
By Location
- Show to specific countries
- Different languages
By Device
- Mobile-only modals
- Desktop-only modals
By Traffic Source
- Facebook ads → Special offer
- Google search → Generic signup
By Page URL
- Product pages → Related offers
- Blog posts → Content upgrades
Integration with Forms
Connect modals to your forms:
- Embed form inside modal
- Pre-fill form fields
- Track conversion separately
Best Practices
Don't Annoy Visitors
- ❌ Don't show immediately (wait 5+ seconds)
- ❌ Don't show on every page
- ❌ Don't make it hard to close
- ✅ Respect visitor intent
- ✅ Provide value in exchange
- ✅ Use sparingly
Offer Real Value
Good modal offers:
- 10% discount code
- Free ebook/guide
- Exclusive content
- Early access
- Free shipping
Keep It Simple
- One clear message
- One call-to-action
- Minimal text (2-3 sentences)
- Eye-catching design
Mobile Optimization
- Test on phones
- Make buttons big enough
- Reduce text on mobile
- Ensure fast loading
Timing Is Everything
Best times to show:
- After reading 50% of blog post
- Before leaving (exit intent)
- After 30 seconds on page
- NOT immediately on arrival
Analytics
Track modal performance in Analytics → Modals:
Key Metrics:
- Impressions: How many times shown
- Conversion Rate: % who completed action
- Close Rate: % who closed without action
- Best Performing Triggers: Which trigger works best
Optimize:
- A/B test different designs
- Adjust trigger timing
- Refine target audience
- Improve offer
Examples
Newsletter Signup Modal
Design:
- Headline: "Get Weekly Tips!"
- Subtext: "Join 10,000+ subscribers"
- Email input field
- Button: "Sign Me Up!"
- Small text: "Unsubscribe anytime"
Trigger: Exit intent or 50% scroll Frequency: Once per week
Discount Code Modal
Design:
- Big "10% OFF" badge
- Headline: "First-Time Visitor?"
- Subtext: "Use code WELCOME10"
- Button: "Copy Code & Shop"
Trigger: 10 seconds after page load Frequency: Once per visitor
Exit Intent Modal
Design:
- Headline: "Wait! Don't Go Empty-Handed"
- Offer: Free shipping on first order
- Email capture
- Button: "Claim My Offer"
Trigger: Exit intent Frequency: Once per day
Troubleshooting
Modal Not Showing?
Check:
- Is modal set to "Active"?
- Does trigger condition match?
- Have you seen it before? (frequency limit)
- Browser console for errors
Modal Looks Broken?
- CSS conflicts with your site
- Custom CSS needed
- Check on different browsers
- Contact support for help
Low Conversion Rate?
Try:
- Better offer (increase value)
- Simpler design (less text)
- Different trigger timing
- A/B test alternatives
Next Steps
Modals are powerful when used wisely. Focus on value, not annoyance! 🎯✨