convert-vsl-page

# Convert VSL Page - The VSL Hosting Page

> *"The VSL does the selling. The page does three things: get them to press play, hold them while they watch, and put the door right where they expect it the moment they decide."*

This skill builds the page that wraps the video. The page applies a compressed Donahoe Method (the video carries most of it), with a deliberate buy-button reveal pattern that respects viewer trust.

## When to Use

Trigger phrases: `vsl page`, `vsl hosting page`, `page for my vsl`, `buy button reveal`, `/convert vsl-page <product>`.

Use when the VSL script exists (or will exist) and the user needs a page to deliver the video to traffic, with appropriate above-fold framing and below-fold reinforcement.

## When NOT to Use

- **Writing the VSL script** → `/convert vsl`.
- **Long-form written sales page (no video)** → `/convert sales-page`.
- **Webinar reg page (different intent - registering for a future event)** → `/convert webinar-reg`.
- **Checkout** → `/convert checkout-page`.
- **Auditing existing VSL page** → `/convert audit`.

## Inputs

Required:
1. **VSL video URL or embed code** - the video that lives on this page.
2. **Product / offer** - same brief as `convert-sales-page` requires.
3. **The one person + The Nerve** (One Person Rule).
4. **Reveal mechanic preference** - instant, time-delayed, or pixel-tracked. Default: time-delayed at the script's CTA timestamp (typically 13:00 for an 18-minute VSL).

Optional:
- **Existing VSL transcript** - for SEO + accessibility caption block.
- **Brand colors / logo.**
- **Below-fold proof assets** - testimonials, logo bar, screenshots.
- **`out_path`** - defaults via `build_report_path`.

## Workflow - All Eight Method Phases (compressed; the video carries most of the load)

### Phase 0 - Four Questions (call `convert-four-questions`)

The page's above-fold copy is a 1–2 sentence answer to **Why You** and **Why Me**. The video answers **Why This** and **Why Now**.

### Phase 1 - Temperature (call `convert-temperature`)

Page chrome scales with temperature:
- **Ice Cold/Cool** → page should look editorial, not commercial. No buy button visible until reveal. Headline + subhead sets up the video - does not pre-sell.
- **Warm** → headline can hint at the offer.
- **Hot/Boiling** → reveal can be immediate; visible CTA stack below the video from second one.

### Phase 2 - Four-Layer Open (call `convert-open`)

Above-the-player headline = compressed Layer 1 (Nerve Strike). Subhead = Layer 2 + Layer 3 in one line. Layer 4 (Fingerprint) lives in the video, not the page.

### Phase 3 - Three Locks Architecture (call `convert-three-locks`)

The page's Three Locks map:
- **Want** → headline + subhead + the play button itself.
- **Trust** → below-fold logo bar + testimonial block (only revealed alongside the buy button, OR placed below the fold for re-reassurance after the video ends).
- **Excuse** → below-fold guarantee block + FAQ.

### Phase 4 - Bullets (call `convert-bullets`)

Below-fold "what you'll learn in this video" bullet block (4–6 bullets, mixed types). Functions as second-chance hook for viewers who scroll past the player without pressing play.

### Phase 5 - Proof (call `convert-proof`)

Light proof above the video - a single Drive-By credential is enough ("...from the team that's helped 14,000 SMBs ship paid traffic since 2014"). Heavy proof below the fold + after CTA reveal.

### Phase 6 - Cascade Close (call `convert-close`)

The CTA stack below the video is the Cascade Close written down:
- Stack (one paragraph)
- Vision (one paragraph)
- Math (one paragraph)
- Safety Net (guarantee block)
- Door (the button)

Plus P.S. and P.P.S. below.

### Phase 7 - Greased Chute (call `convert-chute`)

Page-level chute = vertical momentum. Once the viewer scrolls past the video, the below-fold copy must read fast and tight. No walls of text. Open loops at section breaks.

### Phase 8 - Voice + Bullshit Filter (call `convert-voice` + `convert-bullshit-filter`)

The page voice must match the video's. Mismatched voice between page and presenter is one of the most damaging trust leaks.

## The Buy-Button Reveal Mechanic

Three options, in order of trust impact:

1. **Time-delayed reveal (default).** Button hidden until [t = video script's CTA timestamp]. JavaScript timer or video player event. The viewer who watches to the natural CTA moment finds the button right there.
2. **Pixel-tracked reveal.** Button hidden until video player reports playback reached `[t]`. Best fidelity. Requires player API access.
3. **Instant reveal.** Button visible from page load. Use only for Hot/Boiling traffic - visible CTA on cold-traffic VSL pages reads as desperate.

The reveal is announced in the script ("...click the button below this video right now..."). Page and script must be timed together.

## Section Architecture

| # | Section | Above/below fold | Method primitive |
|---|---------|------------------|------------------|
| 1 | Headline + subhead | Above | Open Layer 1+2 |
| 2 | Video player | Above (hero) | The full Method, in video form |
| 3 | Light proof line under the player | Above | Drive-By |
| 4 | (Reveal-controlled) CTA stack | Below player at reveal | Cascade Close |
| 5 | Bullet block - "what's covered" | Below fold | convert-bullets |
| 6 | Trust/proof block | Below fold | convert-proof |
| 7 | Guarantee block | Below fold | Safety Net |
| 8 | FAQ | Below fold | Lock 3 |
| 9 | P.S. + P.P.S. | Below fold | Cascade reclose |

## HTML/CSS Reference Implementation

```html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{HEADLINE}} - {{BRAND}}</title>
  <meta name="description" content="{{META_DESCRIPTION}}">
  <meta property="og:title" content="{{HEADLINE}}">
  <meta property="og:description" content="{{META_DESCRIPTION}}">
  <meta property="og:type" content="video.other">
  <meta property="og:image" content="{{OG_IMAGE_URL}}">
  <s