Skip to main content

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.

Coming SoonThe template gallery is under development. Templates will be available when the landing page builder launches.

​
Template Overview

Templates provide professionally designed starting points for your landing pages. Each template is:
  • Optimized for its use case - Layout and sections chosen for maximum effectiveness
  • Fully customizable - Change any element after selection
  • Mobile responsive - Looks great on all devices
  • Brand-ready - Automatically applies your organization theme

​
Available Templates

​
Product Drop

For queue-based product releases and limited edition launches.
SectionIncluded
HeroBold headline, countdown, product image
Features3-column benefits grid
Product DetailsSpecs, pricing, availability
Experience WidgetQueue interface
FAQCommon questions
CTAFinal call-to-action
Best for:
  • Limited edition releases
  • Sneaker drops
  • Product launches
  • Pre-order campaigns
┌─────────────────────────────────────────────────┐
│              [Product Image]                    │
│                                                 │
│        Limited Edition Release                  │
│        02d 14h 32m 45s                         │
│                                                 │
│        [ Join the Queue ]                       │
├─────────────────────────────────────────────────┤
│  ┌───────┐  ┌───────┐  ┌───────┐              │
│  │ Fast  │  │ Fair  │  │ Safe  │              │
│  │Shipping│  │ Queue │  │Checkout│              │
│  └───────┘  └───────┘  └───────┘              │
├─────────────────────────────────────────────────┤
│        [Experience Widget]                      │
├─────────────────────────────────────────────────┤
│        FAQ Accordion                            │
├─────────────────────────────────────────────────┤
│        Don't miss out - Join Now               │
│        [ Get in Queue ]                         │
└─────────────────────────────────────────────────┘

​
Raffle / Draw

For lottery-style giveaways and random selection events.
SectionIncluded
HeroPrize showcase, entry countdown
Prize DetailsWhat’s being given away
How It Works3-step process explanation
Experience WidgetDraw entry interface
RulesTerms and conditions
CTAEnter now encouragement
Best for:
  • Giveaways
  • Contest entries
  • Lottery-style releases
  • Promotional draws
┌─────────────────────────────────────────────────┐
│              [Prize Image]                      │
│                                                 │
│           Win This [Product]                    │
│        Entry closes in 2 days                   │
│                                                 │
│          [ Enter to Win ]                       │
├─────────────────────────────────────────────────┤
│         The Prize                               │
│  [Image]  Description of what you could win    │
│           Estimated value: $X,XXX              │
├─────────────────────────────────────────────────┤
│         How It Works                            │
│    1. Enter    2. Wait    3. Win               │
├─────────────────────────────────────────────────┤
│        [Experience Widget]                      │
├─────────────────────────────────────────────────┤
│        Official Rules                           │
└─────────────────────────────────────────────────┘

​
Auction

For competitive bidding experiences.
SectionIncluded
HeroItem showcase, current bid display
Item GalleryMultiple product images
Item DetailsDescription, condition, provenance
Experience WidgetBidding interface
Bid HistoryRecent bids (optional)
TermsAuction rules and payment terms
Best for:
  • Charity auctions
  • Collectible sales
  • Unique item sales
  • Fundraising events
┌─────────────────────────────────────────────────┐
│              [Item Image]                       │
│                                                 │
│         Rare Collectible Item                   │
│       Current Bid: $1,250                       │
│       Ends in: 4h 32m                          │
│                                                 │
│          [ Place Bid ]                          │
├─────────────────────────────────────────────────┤
│  [Thumb] [Thumb] [Thumb] [Thumb]               │
│         Item Gallery                            │
├─────────────────────────────────────────────────┤
│         About This Item                         │
│         Detailed description...                 │
├─────────────────────────────────────────────────┤
│        [Experience Widget]                      │
├─────────────────────────────────────────────────┤
│        Auction Terms                            │
└─────────────────────────────────────────────────┘

​
Waitlist

For pre-launch signups and interest collection.
SectionIncluded
HeroComing soon message, signup form
Value PropsWhy join the waitlist
Social ProofEarly interest stats
Experience WidgetWaitlist signup
ReferralShare to move up (optional)
Best for:
  • Product launches
  • Beta signups
  • Early access programs
  • Interest gauging
┌─────────────────────────────────────────────────┐
│           Something Big is Coming               │
│                                                 │
│        Be the first to know when               │
│        [Product] launches                       │
│                                                 │
│          [ Join Waitlist ]                      │
├─────────────────────────────────────────────────┤
│         Why Join Early?                         │
│  Early access | Exclusive pricing | First dibs │
├─────────────────────────────────────────────────┤
│         10,432 people already waiting          │
├─────────────────────────────────────────────────┤
│        [Experience Widget]                      │
├─────────────────────────────────────────────────┤
│        Share to move up in line                │
│        [Twitter] [Facebook] [Copy Link]        │
└─────────────────────────────────────────────────┘

​
Template Customization

After selecting a template, customize every element:

​
What You Can Change

ElementCustomization Options
TextHeadlines, body copy, button labels
ImagesHero images, gallery items, icons
ColorsOverride theme colors per-section
SectionsAdd, remove, reorder sections
LayoutSection variants, column arrangements
WidgetStyling, placement, behavior

​
What Remains

ElementBehavior
Responsive gridMaintained for mobile compatibility
AccessibilitySemantic structure preserved
PerformanceOptimized asset loading

​
Style Directions

Templates come with style presets:

​
Bold

High contrast, dramatic typography:
  • Large headlines
  • Strong shadows
  • Vibrant colors
  • Maximum impact

​
Minimal

Clean, sophisticated, understated:
  • Subtle typography
  • Generous whitespace
  • Muted colors
  • Focus on content

​
Vibrant

Energetic, colorful, playful:
  • Gradient backgrounds
  • Colorful accents
  • Dynamic layouts
  • Fun personality

​
Premium

Luxurious, refined, exclusive:
  • Elegant typography
  • Dark themes
  • Subtle animations
  • High-end feel

​
Using Templates

​
Step 1: Choose Template

Browse the gallery and select a template that matches your experience type.

​
Step 2: Preview

See the template with your brand theme applied.

​
Step 3: Customize

Modify content, images, and styling to match your needs.

​
Step 4: Publish

Preview final result and publish when ready.

​
Industry-Specific Templates (Coming Soon)

Planned industry templates:
IndustryTemplate Focus
FashionLookbook-style, editorial
TechClean, feature-focused
Food & BeverageAppetizing imagery, urgency
EntertainmentEvent-focused, countdown
SportsDynamic, energetic
LuxuryPremium, exclusive

​
Template Updates

Templates are periodically updated with:
  • New section types
  • Design improvements
  • Performance optimizations
  • Accessibility enhancements
Updates don’t affect existing landing pages - only new pages using templates.

​
Current Workarounds

Until templates are available:

​
Manual Section Assembly

Use the section library to build pages manually:
  1. Start with Hero section
  2. Add Features section
  3. Add Experience Widget block
  4. Add FAQ section
  5. Add CTA section

​
Reference Designs

Use the landing page analyzer to extract styles from existing pages: 
# Analyze a reference page
bun run packages/landing-page-analyzer/src/index.ts analyze https://example.com/landing-page

# Generate with that style
bun run packages/landing-page-analyzer/src/index.ts generate \
  --analysis output.json \
  --product your-product.json
See the Landing Page Analyzer documentation.

​
SDK Implementation

Build a custom landing page with the SDK: 
import { FanfareProvider, ExperienceWidget } from "@waitify-io/fanfare-sdk-react";

export function ProductDropPage() {
  return (
    <FanfareProvider config={{ organizationId: "...", publishableKey: "..." }}>
      {/* Hero */}
      <section className="hero">
        <h1>Limited Edition Release</h1>
        <Countdown targetDate="2024-03-15T10:00:00Z" />
      </section>

      {/* Features */}
      <section className="features">{/* Feature cards */}</section>

      {/* Widget */}
      <section className="widget">
        <ExperienceWidget experienceId="exp_..." />
      </section>

      {/* FAQ */}
      <section className="faq">{/* FAQ accordion */}</section>
    </FanfareProvider>
  );
}

​
Next Steps

Custom Templates

Create your own templates

Editor Guide

Learn to customize

Branding

Apply your brand

Getting Started

Create your first page