/webinar-registration-page

name: webinar-registration-page
description: >
  Build a webinar or live event registration page as a self-contained HTML file with countdown
  timer, speaker bio, agenda, and registration form. Triggers on: "build a webinar registration page",
  "create a webinar sign-up page", "event registration landing page", "live training registration page",
  "workshop sign-up page", "create a webinar page", "build an event page",
  "free webinar landing page", "live demo registration page", "online event page",
  "create a registration page for my webinar", "build a training event page".
license: MIT
version: "1.0.0"
tags: ["affiliate-marketing", "landing-pages", "conversion", "offers", "webinar", "registration"]
compatibility: "Claude Code, ChatGPT, Gemini CLI, Cursor, Windsurf, OpenClaw, any AI agent"
metadata:
  author: affitor
  version: "1.0"
  stage: S4-Landing

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:

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