CRM Landing Page
A personalized landing page that reads contact data from URL parameters and renders a video.
This is the destination page your CRM email links to. Try adding ?name=Alex&company=Acme to the URL.
Landing page preview
YourBrand
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
This is a self-contained HTML page you can host anywhere. It reads name and company
from the URL query string and passes them to the ImpossibleFX player.
<!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>
<link rel="stylesheet" href="https://cdn.impossible.io/support/fxplayer.css" />
<script src="https://cdn.impossible.io/fxplayer/v3/fxplayer.js"></script>
<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-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>
<div id="player"></div>
<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;
var player = new fxplayer.FXPlayer('player', {
controls: true,
impossible: {
projectId: 'YOUR-PROJECT-ID',
movie: 'welcome-video',
params: { name: name, company: company },
},
});
player.play();
</script>
</body>
</html>CRM email template
In your CRM email, use a personalized thumbnail rendered by ImpossibleFX (.jpg) that links
to this landing page. The frame=30 parameter selects which video frame to use as the still image.
<!-- Salesforce Lightning -->
<a href="https://yoursite.com/video/welcome?name={{{Recipient.FirstName}}}&company={{{Recipient.Company}}}">
<img src="https://render.impossible.io/v1/render/YOUR-PROJECT-ID/welcome-video.jpg?name={{{Recipient.FirstName}}}&company={{{Recipient.Company}}}&frame=30" alt="Watch your video" width="600" />
</a>
<!-- HubSpot -->
<a href="https://yoursite.com/video/welcome?name={{ contact.firstname }}&company={{ contact.company }}">
<img src="https://render.impossible.io/v1/render/YOUR-PROJECT-ID/welcome-video.jpg?name={{ contact.firstname }}&company={{ contact.company }}&frame=30" alt="Watch your video" width="600" />
</a>
<!-- Marketo -->
<a href="https://yoursite.com/video/welcome?name={{lead.First Name}}&company={{lead.Company Name}}">
<img src="https://render.impossible.io/v1/render/YOUR-PROJECT-ID/welcome-video.jpg?name={{lead.First Name}}&company={{lead.Company Name}}&frame=30" alt="Watch your video" width="600" />
</a>