webinar-registration-page

# Webinar Registration Page

Build a high-converting webinar or live training registration page as a self-contained HTML file. Features a live JavaScript countdown timer, speaker credibility section, session agenda, social proof, and a registration form that captures email leads. On registration, visitors are confirmed and teased toward the affiliate offer that will be featured in the webinar itself.

## When to Use

- User is hosting a webinar, live training, workshop, or online event
- User wants to build an email list of warm leads before promoting an affiliate product
- User says "webinar page", "event registration", "live training page", "workshop signup"
- User is running a "free training" funnel — a common high-converting affiliate strategy
- The affiliate product is the natural solution to be revealed or promoted during the event

## Workflow

### Step 1: Gather Event Details

Parse the user's request for:
- **Event title**: the name of the webinar/training
- **Presenter name and bio**: who is presenting (can be the user)
- **Date and time**: when the event happens (for the countdown timer)
- **Topic**: what the training covers
- **Affiliate product**: the product that will be featured/promoted in the webinar

**If event details are missing, ask for:**
1. "What is your webinar about? Give me a title or topic."
2. "When is it? Date, time, and timezone please."
3. "What affiliate product will you feature or recommend in the webinar?"

**If user has no real event** (wants a template/evergreen page):
- Offer "evergreen" mode: countdown timer counts down to a fake "next session" time (resets every week), always showing 3-7 days away
- Note in output: "This uses an evergreen countdown — it will always show a near-future date. Replace with a real date when you have one."

**Common webinar funnel structures:**
| Structure | Description | Best for |
|---|---|---|
| Free training → pitch | 45-60 min training, last 15 min pitches affiliate product | High-ticket SaaS, courses |
| Live demo → offer | Demo the product live, include affiliate link in follow-up | Software tools |
| Expert interview → recommendation | Interview + affiliate product recommendation | Authority-building niches |
| Challenge / workshop | Multi-day challenge, affiliate product is the tool | Fitness, marketing, business |

### Step 2: Plan the Page Structure

Read `references/conversion-principles.md` for event page conversion principles.

A webinar registration page must create urgency (countdown), credibility (speaker), and anticipation (agenda) while making registration as frictionless as possible.

Page sections:
1. **Urgency Bar** (top, sticky) — "Free Live Training: [Topic] — [Date at Time timezone] — [N seats remaining]"
2. **Hero Section**:
   - Event label: "FREE LIVE WEBINAR" or "FREE TRAINING"
   - Headline: the transformation promise of the event
   - Sub-headline: what attendees will learn + who it's for
   - Date/time with timezone
   - Registration form (first name + email + submit)
   - Seat scarcity signal: "Limited to [N] attendees"
3. **Countdown Timer** (below hero fold):
   - Live JavaScript countdown: Days / Hours / Minutes / Seconds
   - Label: "The training starts in:"
4. **What You'll Learn** — 4-6 bullet points (specific outcomes, not vague topics)
5. **Speaker Section**:
   - Name + headshot placeholder (styled CSS avatar)
   - Role / credentials
   - 2-3 sentence bio establishing expertise
   - Social proof: "Helped [N] people [outcome]"
6. **Agenda Section** — 3-5 session blocks with time + title + brief description
7. **Who This Is For** — 4-5 bullet points naming the ideal attendee (and 2 "this is NOT for you if" bullets)
8. **Testimonials** — 2-3 from past attendees (or representative examples)
9. **FAQ** — 5-7 questions about the event logistics
10. **Second Registration Form** — repeat below the fold for scrollers
11. **Footer** — FTC disclosure, privacy note, Affitor attribution

**Affiliate integration in the webinar funnel:**
The registration page itself should NOT aggressively sell the affiliate product — that's the webinar's job. But it should:
- Tease the product in the "What You'll Learn" section: "Discover the exact tool I use to [outcome] (I'll share the link during the training)"
- Include a subtle line in the description: "We'll cover [topic] using [Product] — the tool that [benefit]"

### Step 3: Build the Countdown Timer

The countdown timer is the most technically important element. Implement it correctly:

```javascript
function getEventDate() {
  // Replace with actual event timestamp
  return new Date('[ISO_DATE_STRING]');
}

function updateCountdown() {
  const now = new Date();
  const event = getEventDate();
  const diff = event - now;

  if (diff <= 0) {
    document.getElementById('countdown').innerHTML =
      '<div class="countdown-ended">The training has started! <a href="[join_url]">Join now →</a></div>';
    return;
  }

  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((diff % (1000 * 60)) / 1000);

  // Update DOM elements
  document.getElementById('cd-days').textContent = String(days).padStart(2, '0');
  document.getElementById('cd-hours').textContent = String(hours).padStart(2, '0');
  document.getElementById('cd-minutes').textContent = String(minutes).padStart(2, '0');
  document.getElementById('cd-seconds').textContent = String(seconds).padStart(2, '0');
}

setInterval(updateCountdown, 1000);
updateCountdown();
```

**Evergreen mode** (if no real date provided):
```javascript
function getEventDate() {
  const now = new Date();
  const daysUntilNext = 5; // Always 5 days away
  return new Date(now.getTime() + (daysUntilNext * 24 * 60 * 60 * 1000));
}
```

### Step 4: Write the Full HTML

**Copy requirements:**

*Event headline formula:*
- "How to [Achieve Specific Outcome