webinar-registration-page

What this skill does

# 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] in [Timeframe] — Even If [Common Objection]"
- "The [Adjective] [Method/System] That Helped [N] [People] [Achieve Outcome]"
- "Free Live Training: [Topic] — [Specific Claim About the Session]"

*Urgency bar copy:*
- "FREE LIVE TRAINING — [Short Title] — [Weekday, Month Day] at [Time] [TZ] — [N] Spots Left"

*What You'll Learn bullets (outcome-first format):*
- "[Specific skill/tactic] — so you can [specific result]"
- "The [method/framework] that [social proof claim]"
- "Why [common mistake] is killing your results — and how to fix it in [timeframe]"

*Speaker bio (credibility elements to include):*
- Years of experience or number of clients/students
- Specific, verifiable result they achieved
- Notable publication, company, or platform they've appeared on
- Why they're qualified to teach this specific topic

*Agenda block format:*
```
[Time Marker] — [Session Title]
[One sentence description of what happens in this block]
```

**HTML/CSS requirements:**
- All CSS inline in `<style>` block
- Mobile-first responsive
- Countdown timer: large digits in boxes with labels (Days/Hours/Min/Sec)
- Color scheme applied to: urgency bar, countdown boxes, CTA buttons, section accents
- Registration form: first name + email fields + submit button
- Form submission: JS redirect to a confirmation page or affiliate thank-you URL
- Speaker avatar: styled CSS circle placeholder (bg color + initials)
- Agenda: timeline-style visual with numbered steps or time markers

**Required elements:**
- FTC disclosure in footer: "This training may reference affiliate products. We may earn a commission on purchases."
- Privacy note near form: "No spam. Unsubscribe anytime. Your information is never shared."
- "Built with Affiliate Skills by Affitor" footer from `shared/references/affitor-branding.md`

### Step 5: Format Output

**Part 1: Page Summary**
```
---
WEBINAR REGISTRATION PAGE
---
Event: [title]
Presenter: [name]
Date/Time: [event date] OR [evergreen mode]
Topic: [what the webinar cove