Coming SoonThe landing page builder is currently under development. This guide describes the intended workflow that will be available when the feature launches. Check the changelog for updates. Overview
Creating a landing page in Fanfare follows this workflow:
- Create an experience (queue, draw, auction, or timed release)
- Open the Design Studio for that experience
- Choose a template or start from scratch
- Customize content and branding
- Configure SEO settings
- Preview and publish
Estimated time: 5-10 minutes
Prerequisites
Before creating a landing page, you need:
- An active Fanfare organization
- At least one experience created
- (Optional) Brand theme configured in organization settings
Step 1: Navigate to Design Studio
From the experience detail page:
- Click on the Design Studio card in the experience sections grid
- The Design Studio opens with options for theming and landing pages
Experience Detail
├── Overview
├── Design Studio ← Click here
│ ├── Theme Settings (available)
│ └── Landing Page (coming soon)
├── Marketing Hub
└── Settings
Step 2: Choose a Starting Point
You have three options when creating a landing page:
Option A: Start from a Template
Templates provide pre-designed layouts optimized for specific use cases:
| Template | Best For |
|---|
| Product Drop | Queue-based product releases |
| Raffle | Draw-based giveaways and lotteries |
| Auction | Competitive bidding experiences |
| Waitlist | Pre-launch signup collection |
Option B: Start from Scratch
Begin with a blank canvas and add sections as needed. Available section types:
- Hero - Bold opening with headline and media
- Features - Highlight benefits in a grid layout
- Countdown - Display time until experience starts
- Testimonials - Social proof quotes
- CTA - Strong call-to-action blocks
- FAQ - Frequently asked questions
Option C: Import from Reference
Advanced users can generate landing pages by analyzing reference designs. This feature uses AI to extract design patterns from existing pages and apply them to your content.
Step 3: Customize Your Page
Content Editing
Each section supports content customization:
Hero Section
├── Headline (text)
├── Subheadline (text)
├── Media (image or video)
├── CTA Button (text + link)
└── Background (color, gradient, or image)
Theme Customization
Landing pages inherit your organization’s brand theme, but you can override:
- Colors - Primary, secondary, accent, background
- Typography - Font family, sizes, weights
- Spacing - Section padding and margins
See Branding for detailed customization options.
Optimize your page for search engines and social sharing:
| Setting | Purpose | Example |
|---|
| Page Title | Browser tab and search results | ”Limited Edition Sneaker Drop” |
| Meta Description | Search result snippet | ”Join the queue for exclusive access…” |
| Share Image | Social media preview | 1200x630px product image |
Keep titles under 60 characters and descriptions under 160 characters for optimal display in search results.
Step 5: Preview Your Page
Before publishing, preview your landing page:
- Desktop view - Full-width layout
- Tablet view - Medium breakpoint
- Mobile view - Narrow layout
The preview shows exactly what visitors will see, including the experience widget.
Step 6: Set Your URL Slug
Each landing page needs a unique URL slug:
https://your-domain.fanfare.io/[experience-slug]/[page-slug]
- Experience slug:
summer-sneaker-drop
- Page slug:
register
- Full URL:
https://acme.fanfare.io/summer-sneaker-drop/register
Slugs cannot be changed after publishing without creating redirects. Choose carefully.
Step 7: Publish
When ready, click Publish to make your landing page live.
Publishing:
- Makes the page accessible at its URL
- Records the publish timestamp
- Creates a snapshot of the current design
Draft vs Published
| Status | Visibility | Editable |
|---|
| Draft | Only in preview | Yes |
| Published | Public | Yes (changes require re-publish) |
Current Workarounds
Until the landing page builder launches, you can achieve similar results using:
SDK Integration
Embed the Fanfare widget on your own website:
import { FanfareProvider, ExperienceWidget } from "@waitify-io/fanfare-sdk-react";
export function ExperiencePage() {
return (
<FanfareProvider
config={{
organizationId: "org_...",
publishableKey: "pk_...",
}}
>
<div className="mx-auto max-w-2xl py-16">
<h1>Join the Queue</h1>
<p>Limited edition release - first come, first served.</p>
<ExperienceWidget experienceId="exp_..." variant="standalone" />
</div>
</FanfareProvider>
);
}
Shopify Theme Blocks
Shopify merchants can use theme blocks to add Fanfare widgets to any page:
- Open the Shopify theme editor
- Add a Fanfare block to your desired page
- Configure the experience ID
See Shopify Integration for details.
Next Steps
