In DevelopmentPreview functionality within the editor is working in prototypes. Shareable preview links and device simulation are coming with the full landing page builder launch.
Preview Overview
Before publishing your landing page, preview it to:
- Verify content displays correctly
- Test responsive behavior across devices
- Check the experience widget functionality
- Review load performance
- Validate accessibility
In-Editor Preview
The landing page editor includes a real-time preview panel.
Preview Mode
Click Preview in the editor toolbar to:
┌─────────────────────────────────────────────────────────┐
│ ← Back to Editor Desktop | Tablet | Mobile 100% │
├─────────────────────────────────────────────────────────┤
│ ┌─────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Your Landing Page │ │
│ │ │ │
│ │ As Visitors See It │ │
│ │ │ │
│ │ [Experience Widget] │ │
│ │ │ │
│ │ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────┘
Device Simulation
Preview across different screen sizes:
| Device | Width | Aspect |
|---|
| Desktop | 1440px | 16:9 |
| Laptop | 1024px | 16:10 |
| Tablet | 768px | 4:3 |
| Mobile | 375px | 9:16 |
Always test mobile first - most landing page traffic comes from mobile devices.
Zoom Controls
Adjust preview zoom to see the full page:
| Zoom | Use Case |
|---|
| 50% | See full page layout |
| 75% | Balance detail and context |
| 100% | Actual size rendering |
| Fit | Auto-fit to preview panel |
Shareable Preview Links
Shareable preview links are coming soon. Until then, use screen recordings or arrange live demo sessions.
Planned Features
Generate temporary preview links for stakeholder review:
https://preview.fanfare.io/abc123xyz?token=preview_...
- Expire after 24 hours (configurable)
- Show a preview banner
- Track view count
- Allow annotation/feedback (future)
Testing Checklist
Content Review
Layout Review
Responsive Review
| Breakpoint | Check |
|---|
| Desktop (1440px) | Full layout, multi-column sections |
| Tablet (768px) | Adjusted columns, touch-friendly spacing |
| Mobile (375px) | Single column, stacked elements, readable text |
| Metric | Target | Tool |
|---|
| First Contentful Paint | < 1.8s | Lighthouse |
| Largest Contentful Paint | < 2.5s | Lighthouse |
| Cumulative Layout Shift | < 0.1 | Lighthouse |
| Total Page Size | < 3MB | DevTools |
Accessibility Review
Test Mode
Test the widget without affecting production data:
<ExperienceWidget
experienceId="exp_..."
testMode={true} // Enables test mode
/>
- Entries are not recorded to production
- Countdowns can be skipped
- Sequences can be advanced manually
- No rate limiting
Test Scenarios
| Scenario | How to Test |
|---|
| Before launch | Set experience to “upcoming” |
| During launch | Set experience to “active” |
| After capacity | Set distribution to “full” |
| Different auth | Test guest, email, phone |
| With access code | Enter valid/invalid codes |
Browser Testing
Test across major browsers:
| Browser | Priority | Notes |
|---|
| Chrome | High | Primary target |
| Safari | High | iOS default browser |
| Firefox | Medium | Desktop users |
| Edge | Medium | Windows default |
| Samsung Internet | Low | Android variant |
Browser-Specific Checks
| Browser | Watch For |
|---|
| Safari | Date input styling, video autoplay |
| Firefox | Form validation styling |
| Mobile Safari | Viewport height (100vh issues) |
| Chrome Android | Touch target sizing |
Load Testing
For high-traffic launches, test page performance under load:
Pre-Launch Checklist
Expected Traffic Planning
| Traffic Level | Preparation |
|---|
| < 1K concurrent | Standard setup |
| 1K-10K concurrent | Verify CDN config |
| 10K+ concurrent | Contact Fanfare support |
Preview Environment
Current Options
| Environment | Purpose |
|---|
| Production | Live pages, real data |
| Test mode | Same infrastructure, isolated entries |
| Local preview | Editor preview only |
Coming Soon
Dedicated preview environments with:
- Complete data isolation
- Ability to simulate scenarios
- Performance testing support
- Team collaboration features
Feedback Collection
Internal Review Process
- Self-review - Editor preview for quick checks
- Peer review - Screen share or recording
- Stakeholder review - Scheduled demo or preview link
- QA review - Full testing checklist
External Feedback (Future)
Preview links will support:
- Comment annotations
- Issue flagging
- Approval workflows
Current Workarounds
Screen Recording
Record preview walkthrough for stakeholders:
- Open preview in editor
- Use screen recording (Loom, QuickTime)
- Walk through each section
- Test widget interactions
- Share recording for feedback
Staging Experience
Create a duplicate experience for testing:
- Clone the production experience
- Set to “test” mode
- Connect landing page to test experience
- Test full flow safely
- Delete test experience when done
Next Steps
