ProductsServicesDocsPricingAboutContact Log in Sign up

Mailchimp Landing Page

A personalized landing page for Mailchimp email campaigns. The page reads contact data from URL parameters and plays a personalized video via the ImpossibleFX Player iframe embed. Try adding ?name=Alex&company=Acme to the URL.

Landing page preview

Hi there, we made this for you

See how your company can get started with personalized video.

Get Started

No credit card required

Source code

A self-contained HTML page you can host anywhere. It reads name and company from the URL, then embeds the ImpossibleFX Player via iframe. The player handles rendering and playback. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Your Personalized Video</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: system-ui, sans-serif; background: #0a0a0a; color: #e5e5e5; }
    .header { padding: 1.5rem 2rem; border-bottom: 1px solid #222; }
    .logo { font-size: 1.125rem; font-weight: 600; }
    .content { max-width: 720px; margin: 0 auto; padding: 3rem 1.5rem; text-align: center; }
    h1 { font-size: 2rem; font-weight: 400; margin-bottom: 0.5rem; }
    .subtitle { color: #999; margin-bottom: 2rem; }
    #player {
      width: 100%; aspect-ratio: 16/9; border: none;
      border-radius: 8px; overflow: hidden;
    }
    .cta { margin-top: 2rem; }
    .cta a {
      display: inline-block; padding: 0.75rem 2rem; background: #e8590c;
      color: #fff; text-decoration: none; border-radius: 6px; font-weight: 500;
    }
    .cta a:hover { background: #d14e0a; }
    .cta p { color: #666; font-size: 0.8125rem; margin-top: 0.75rem; }
  </style>
</head>
<body>
  <div class="header"><div class="logo">YourBrand</div></div>
  <div class="content">
    <h1>Hi <span id="name">there</span>, we made this for you</h1>
    <p class="subtitle">
      See how <span id="company">your company</span> can get started.
    </p>
    <iframe id="player" allow="fullscreen; autoplay"></iframe>
    <div class="cta">
      <a href="#">Get Started</a>
      <p>No credit card required</p>
    </div>
  </div>

  <script>
    var params = new URLSearchParams(window.location.search);
    var name = params.get('name') || 'there';
    var company = params.get('company') || 'your company';

    document.getElementById('name').textContent = name;
    document.getElementById('company').textContent = company;

    // Build the ImpossibleFX Player embed URL
    var renderParams = JSON.stringify({ name: name, company: company });
    document.getElementById('player').src =
      'https://cdn.impossible.io/support/embed.html'
      + '?projectId=YOUR-PROJECT-ID'
      + '&movie=welcome-video'
      + '&params=' + encodeURIComponent(renderParams)
      + '&controls=1';
  </script>
</body>
</html>

Mailchimp email template

In your Mailchimp email, use a personalized thumbnail (rendered as a .jpg by ImpossibleFX) that links to this landing page. Mailchimp replaces merge tags like *|FNAME|* at send time. 

<a href="https://yoursite.com/video/welcome?name=*|FNAME|*&company=*|COMPANY|*">
  <img
    src="https://render.impossible.io/v1/render/YOUR-PROJECT-ID/welcome-video.jpg?name=*|FNAME|*&company=*|COMPANY|*&frame=30"
    alt="Watch your personalized video"
    width="600"
  />
</a>

Alternative: <video> tag

If you prefer a plain HTML5 video tag instead of the iframe player, replace the iframe with a <video> element and set its src to the ImpossibleFX direct URL: 

<video id="player" controls width="100%"
  style="max-width: 720px; border-radius: 8px;">
  Your browser does not support video.
</video>

<script>
  var params = new URLSearchParams(window.location.search);
  var name = params.get('name') || 'there';
  var company = params.get('company') || '';
  document.getElementById('player').src =
    'https://render.impossible.io/v1/render/YOUR-PROJECT-ID/welcome-video.mp4'
    + '?name=' + encodeURIComponent(name)
    + '&company=' + encodeURIComponent(company);
</script>
← Back to Automation & Landing Pages