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.
Countdown Overview
Countdown timers create urgency and keep visitors informed about when your experience starts. Fanfare provides countdown functionality in two ways:
- Experience Widget - Built-in countdown when experience is in “upcoming” phase
- Countdown Section - Standalone countdown block for landing pages (coming soon)
The experience widget automatically displays a countdown when:
- The experience has a scheduled start time
- The current time is before the start time
- The sequence is in the “upcoming” stage
┌─────────────────────────────────────────────────┐
│ │
│ Limited Edition Drop │
│ │
│ Launching in │
│ │
│ 02d 14h 32m 45s │
│ │
│ [ Get notified when we launch ] │
│ │
└─────────────────────────────────────────────────┘
| Phase | Display |
|---|
| > 7 days | Date + time display |
| 1-7 days | Days, hours, minutes |
| < 24 hours | Hours, minutes, seconds |
| < 1 hour | Minutes, seconds (updating) |
| Ended | Transitions to entry form |
Countdown Section (Coming Soon)
The landing page editor will include a dedicated countdown section with:
Configuration Options
| Setting | Description | Options |
|---|
| Target | What to count down to | Experience start, custom date |
| Display Units | Which time units to show | Days, hours, minutes, seconds |
| Style | Visual appearance | Minimal, cards, flip, circular |
| End Behavior | What happens at zero | Hide, show message, redirect |
Target Options
Experience Start
Automatically syncs with your experience schedule:
{
target: "experience-start",
experienceId: "exp_..." // Inherits from page
}
Custom Date
Specify any date and time:
{
target: "custom",
date: "2024-03-15T10:00:00Z",
timezone: "America/New_York"
}
Style Variants
Minimal
Simple numbers with labels:
02 Days 14 Hours 32 Minutes 45 Seconds
Cards
Each unit in a separate card:
┌────┐ ┌────┐ ┌────┐ ┌────┐
│ 02 │ │ 14 │ │ 32 │ │ 45 │
│Days│ │Hrs │ │Min │ │Sec │
└────┘ └────┘ └────┘ └────┘
Flip Clock
Animated flip-style numbers (CSS animation):
┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐
│ 0 │ │ 2 │ : │ 1 │ │ 4 │ : │ 3 │ │ 2 │
└─────┘ └─────┘ └─────┘ └─────┘ └─────┘ └─────┘
Hours Minutes Seconds
Circular Progress
Numbers inside progress rings:
╭──────╮ ╭──────╮ ╭──────╮
╱ 02 ╲ ╱ 14 ╲ ╱ 32 ╲
│ Days │ │ Hrs │ │ Min │
╲ ╱ ╲ ╱ ╲ ╱
╰──────╯ ╰──────╯ ╰──────╯
End Behavior
Configure what happens when the countdown reaches zero:
| Behavior | Description |
|---|
| Hide | Remove countdown section entirely |
| Show Message | Display custom text (e.g., “We’re live!”) |
| Redirect | Navigate to another URL |
| Refresh | Reload the page (shows updated widget) |
{
endBehavior: "showMessage",
endMessage: "The drop is live! Join now.",
endCta: {
text: "Join Queue",
scrollTo: "#experience-widget"
}
}
Timezone Handling
Countdowns display in the visitor’s local timezone by default:
| Server Time (UTC) | Visitor Timezone | Display |
|---|
| 2024-03-15T14:00Z | America/New_York (UTC-4) | March 15, 10:00 AM |
| 2024-03-15T14:00Z | Europe/London (UTC) | March 15, 2:00 PM |
| 2024-03-15T14:00Z | Asia/Tokyo (UTC+9) | March 15, 11:00 PM |
Override Display Timezone
Show a specific timezone to all visitors:
{
displayTimezone: "America/Los_Angeles",
showTimezone: true // Shows "PST" label
}
Countdown Labels
Customize the text labels:
| Unit | Default | Example Custom |
|---|
| Days | ”Days" | "D” |
| Hours | ”Hours" | "H” |
| Minutes | ”Minutes" | "M” |
| Seconds | ”Seconds" | "S” |
Internationalization
Labels support i18n through experience settings:
// English (default)
{ days: "Days", hours: "Hours", minutes: "Minutes", seconds: "Seconds" }
// Spanish
{ days: "Dias", hours: "Horas", minutes: "Minutos", seconds: "Segundos" }
// Japanese
{ days: "日", hours: "時間", minutes: "分", seconds: "秒" }
Theme Integration
Countdown sections inherit theme settings:
| Element | Theme Property |
|---|
| Numbers | --ff-color-text |
| Labels | --ff-color-muted |
| Card background | --ff-color-background with opacity |
| Card border | --ff-color-muted |
| Progress rings | --ff-color-primary |
Custom Styling
Override specific countdown styles:
.ff-countdown {
--ff-countdown-number-size: 3rem;
--ff-countdown-label-size: 0.875rem;
--ff-countdown-gap: 1rem;
}
.ff-countdown-card {
--ff-countdown-card-bg: rgba(255, 255, 255, 0.05);
--ff-countdown-card-border: 1px solid rgba(255, 255, 255, 0.1);
--ff-countdown-card-radius: 0.75rem;
}
Current Workarounds
Until standalone countdown sections are available:
The widget provides countdown functionality automatically:
<ExperienceWidget
experienceId="exp_..."
variant="countdown-only" // Coming soon
/>
Custom Countdown Component
Create a custom countdown using the SDK:
import { useFanfare } from "@waitify-io/fanfare-sdk-react";
import { useState, useEffect } from "react";
function CustomCountdown({ experienceId }: { experienceId: string }) {
const { sdk } = useFanfare();
const [timeLeft, setTimeLeft] = useState<TimeLeft | null>(null);
useEffect(() => {
// Fetch experience to get start time
const loadExperience = async () => {
const experience = await sdk.experiences.get(experienceId);
// Set up countdown logic
};
loadExperience();
}, [experienceId, sdk]);
useEffect(() => {
const interval = setInterval(() => {
// Update countdown
}, 1000);
return () => clearInterval(interval);
}, []);
if (!timeLeft) return null;
return (
<div className="flex justify-center gap-4">
<div className="text-center">
<div className="text-4xl font-bold">{timeLeft.days}</div>
<div className="text-muted text-sm">Days</div>
</div>
{/* ... hours, minutes, seconds */}
</div>
);
}
Best Practices
When to Use Countdowns
| Scenario | Recommendation |
|---|
| Product drop | Yes - creates urgency |
| Always-available experience | No - no urgency needed |
| Multi-day event | Yes - shows until start |
| Recurring weekly | Consider - may cause confusion |
Countdown Placement
| Position | Effect |
|---|
| Hero section | Maximum visibility |
| Above fold | Good visibility |
| Near widget | Context for action |
| Multiple places | Can feel aggressive |
One well-placed countdown is more effective than multiple countdowns throughout the page.
Accessibility
Ensure countdowns are accessible:
- Use
aria-live="polite" for screen readers
- Don’t rely solely on visual countdown
- Provide text alternative (“Starts March 15 at 10:00 AM EST”)
- Test with reduced motion preferences
Next Steps
Media
Add images and videos
Content Blocks
Other section types
Preview
Test your countdown
Sequences
Configure experience timing
