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:

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 * 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):

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 covers]
Affiliate Product: [product featured in the webinar]
Registration Form: [fields collected]
Post-Registration: [where visitor goes after submitting]
Countdown: [live / evergreen]
Color: [scheme applied]
---

Part 2: Complete HTML Full file in a fenced code block. Save as [webinar-slug]-registration.html.

Part 3: Setup Instructions

---
SETUP
---
1. Save as `[event-slug]-registration.html`
2. Update the event date: find `[ISO_DATE_STRING]` in the JS and replace with your event's ISO 8601 timestamp
   e.g., "2025-04-15T19:00:00-05:00" for April 15, 2025 at 7pm Central
3. Wire the registration form to your webinar platform:
   - Zoom Webinars: Use Zoom's registration API or replace form action with Zoom's embed
   - Demio: Replace form with Demio's embed code
   - StreamYard / YouTube Live: Collect emails with a simple form, send Zoom link via email
   - Generic (Mailchimp/ConvertKit): Point form to your ESP, send the webinar link in welcome email
4. Replace post-registration redirect: find `[CONFIRMATION_URL]` and replace with your thank-you page or affiliate link
5. Deploy: Netlify Drop / Vercel / GitHub Pages
---