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

HTML/CSS Reference Implementation

<!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}}">
  <style>
    :root {
      --ink:#0e1116; --ink-soft:#3a3f47; --paper:#fbfaf6;
      --accent:#c0392b; --accent-ink:#fff; --rule:#e6e2d8; --max:760px;
    }
    *,*::before,*::after{box-sizing:border-box}
    body{margin:0;font:18px/1.6 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--paper)}
    main{max-width:var(--max);margin:0 auto;padding:24px 20px 96px}
    h1{font-size:clamp(26px,5vw,40px);line-height:1.18;margin:8px 0 12px}
    h2{font-size:clamp(20px,3.8vw,26px);margin:48px 0 12px}
    p.subhead{font-size:20px;color:var(--ink-soft);margin:0 0 20px}
    .player{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden;margin:8px 0 16px}
    .player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
    .drive-by{font-size:14px;color:var(--ink-soft);margin:0 0 24px}
    .cta-wrap{display:none;margin:24px 0;padding:24px;background:#fff;border:1px solid var(--rule);border-radius:8px}
    .cta-wrap.revealed{display:block}
    .cta{display:inline-block;padding:18px 28px;background:var(--accent);color:var(--accent-ink);text-decoration:none;font-weight:700;font-size:18px;border-radius:6px;border:0;cursor:pointer}
    .cta:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
    ul.bullets{list-style:none;padding:0}
    ul.bullets li{padding:10px 0 10px 28px;position:relative;border-bottom:1px solid var(--rule)}
    ul.bullets li::before{content:"";position:absolute;left:6px;top:18px;width:10px;height:10px;background:var(--accent);border-radius:2px}
    /* Default: Conversational Proof - never announces itself (Method Framework 2) */
    figure.proof{margin:1.2em 0;padding-left:1.5em;border-left:2px solid currentColor;font-style:italic;opacity:.92}
    figure.proof blockquote, figure.proof p{margin:0;border:0;padding:0}
    figure.proof figcaption{display:inline;font-size:.9em;font-style:normal;margin-left:.5em;opacity:.7;color:var(--ink-soft)}
    /* Opt-in: blocked framing - Hot/Boiling audiences only */
    figure.proof.block{margin:1.5em 0;padding:1em 1.2em;background:rgba(0,0,0,.04);border-left:4px solid var(--accent);border-radius:4px;font-style:normal;opacity:1}
    figure.proof.block blockquote{margin:0 0 .5em 0}
    figure.proof.block figcaption{display:block;opacity:.75;font-size:.85em;margin-top:.4em;margin-left:0}
    details{border-bottom:1px solid var(--rule);padding:12px 0}
    details summary{cursor:pointer;font-weight:600}
    .ps{border-top:2px solid var(--rule);padding-top:24px;margin-top:48px;font-style:italic;color:var(--ink-soft)}
    @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
  </style>
</head>
<body>
<main>
  <header>
    <h1>{{HEADLINE_NERVE_STRIKE}}</h1>
    <p class="subhead">{{SUBHEAD_LAYER_2_PLUS_3}}</p>
    <div class="player">
      <iframe src="{{VSL_EMBED_URL}}" title="{{VSL_TITLE}}" loading="lazy" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
    </div>
    <p class="drive-by">{{DRIVE_BY_CREDENTIAL_LINE}}</p>
  </header>

  <!-- CTA stack revealed at script timestamp -->
  <section id="cta" class="cta-wrap" aria-live="polite">
    <h2>{{CLOSE_HEADER}}</h2>
    <p>{{STACK_PARAGRAPH}}</p>
    <p>{{VISION_PARAGRAPH}}</p>
    <p>{{MATH_PARAGRAPH}}</p>
    <p><a class="cta" href="{{CHECKOUT_URL}}" aria-label="{{CTA_ARIA}}">{{CTA_PRIMARY}}</a></p>
    <p>{{DOOR_INSTRUCTION}}</p>
  </section>

  <section><h2>{{BULLET_HEADER}}</h2>
    <ul class="bullets">
      <li>{{BULLET_KEYHOLE_1}}</li>
      <li>{{BULLET_FLIP_1}}</li>
      <li>{{BULLET_SNAPSHOT_1}}</li>
      <li>{{BULLET_SCAR_1}}</li>
      <li>{{BULLET_5}}</li>
      <li>{{BULLET_6}}</li>
    </ul>
  </section>

  <section><h2>{{TRUST_HEADER}}</h2>
    <figure class="proof"><blockquote>{{ANECDOTE_OR_RECEIPT_1}}</blockquote><figcaption>{{NAMECHECK_1}}</figcaption></figure>
    <figure class="proof"><blockquote>{{ANECDOTE_OR_RECEIPT_2}}</blockquote><figcaption>{{NAMECHECK_2}}</figcaption></figure>
  </section>

  <section><h2>{{GUARANTEE_HEADER}}</h2><p>{{GUARANTEE_BODY}}</p></section>

  <section><h2>Questions you might be asking</h2>
    <details><summary>{{FAQ_Q1}}</summary><p>{{FAQ_A1}}</p></details>
    <details><summary>{{FAQ_Q2}}</summary><p>{{FAQ_A2}}</p></details>
    <details><summary>{{FAQ_Q3}}</summary><p>{{FAQ_A3}}</p></details>
  </section>

  <aside class="ps">
    <p><strong>P.S.</strong> {{PS_RECLOSE}}</p>
    <p><strong>P.P.S.</strong> {{PPS_GUARANTEE_RESTATE}}</p>
  </aside>
</main>

<script>
  // Default reveal mechanic: time-delayed at {{REVEAL_SECONDS}}.
  (function(){
    var ms = {{REVEAL_SECONDS}} * 1000;
    setTimeout(function(){
      var c = document.getElementById('cta');
      if (c) c.classList.add('revealed');
    }, ms);
  })();
</script>
</body>
</html>

Notes for the writer:

• The CTA reveal uses a setTimeout fallback. For pixel-precise reveal, replace with the video player's timeupdate API hook (Wistia, Vimeo, YouTube IFrame API, or Bunny all expose one).
• Keep the <header> minimal. The video does the work.
• The aria-live="polite" on the CTA wrap announces to screen readers when the button appears.
• Lazy-load the iframe; the page should be lightweight enough that the video itself is the slowest thing.

Output Template

# VSL Page - {{PRODUCT}}

**One person:** {{NAME}}, {{SITUATION}}
**The Nerve:** {{NERVE}}
**Temperature:** {{LEVEL}}
**Reveal mechanic:** {{TIME_DELAYED|PIXEL_TRACKED|INSTANT}} at {{TIMESTAMP}}
**Offer:** {{PRICE}} / {{COMPONENTS}} / {{GUARANTEE}}

## Phase 0 - Four Questions
- Why You / Why Me / Why This / Why Now → answers (Why This + Why Now mostly carried by the video)

## Phase 2 - Above-fold copy
- **Headline (Nerve Strike):** "{{H1}}"
- **Subhead (Layers 2–3):** "{{SUBHEAD}}"
- **Drive-By line under player:** "{{DRIVE_BY}}"

## Phase 3–7 - Below-fold copy
- Bullet block: {{4–6 bullets, typed}}
- Trust block: {{2 proof figures}}
- Guarantee block: {{full guarantee text}}
- FAQ: {{3 Q/A pairs}}
- P.S. / P.P.S.: {{recloses}}

## HTML reference
{{HTML_BLOCK}}

## Method coverage report

Method coverage report: Open: partial - Layer 1 in headline, Layers 2-3 in subhead, Layer 4 lives inside the video; the page itself compresses the open Three Locks: full - Want above the fold + in bullets, Trust in proof block, Excuse via guarantee + FAQ Proof: full - Drive-By above the fold, heavier proof block below Bullets: full - mixed types (Keyhole / Flip / Snapshot / Scar) Cascade Close: full - Stack / Vision / Math / Safety Net / Door + P.S. + P.P.S. in spec order Greased Chute: full - short paragraphs, open loops at section breaks, video reveal mechanic supports momentum Voice Rules: full - first person, no marketing-speak; matches the VSL script voice Temperature: {{COOL / WARM / HOT}}

Required next step: Run /convert bullshit-filter on this draft before shipping. The Filter is a SEPARATE pass - this skill cannot grade its own output.

## Notes / Cross-Skill Composition

- This skill expects the VSL script to exist or be commissioned in the same conversation. If it doesn't, call `/convert vsl` first.
- For very cold traffic, consider routing through `/convert bridge-page` first to pre-warm before sending traffic to the VSL page.
- For paid-ads traffic, ensure the ad's promise matches the page headline and the video's open. Mismatch = bounce.
- Do not place a "Skip the video" link on cold-traffic pages. It signals you don't trust your own video.

## Lineage

- VSL hosting page conventions - long-form direct-response TV-to-web conversion canon.
- Slippery-slide below-fold pacing - Sugarman (The AdWeek Copywriting Handbook, 1998).
- Delayed-CTA / consistency-and-commitment psychology - Cialdini (Influence, 1984).
- The Method itself - Wayland-owned operating system.