Documentation Index Fetch the complete documentation index at: https://docs.fanfare.io/llms.txt
Use this file to discover all available pages before exploring further.
In Development Preview 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_...
Preview links will:
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 />
In 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 checksPeer review - Screen share or recordingStakeholder review - Scheduled demo or preview linkQA 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
Custom Domains Configure your domain
Analytics Track page performance
Getting Started Publish your first page
