Want to capture more leads from your videos? If you're a MailChimp user, you may already be taking advantage of our full MailChimp video integration, which makes it easy to collect viewers' email addresses at the end of a video. But if you're not a MailChimp user, you're not left out! You can still use JavaScript API to add an email capture to your videos. In fact, with the API not only can you add a capture form, you can trigger it to appear at any point during your video. This way you can reel viewers in and then ask for their contact details, say, 5 seconds in, before they can watch the rest of your content. It's a quick and easy way to capture new leads.
I've created a mockup of this in our demo area—head on over there to check it out before I go into more detail. I've used some nifty CSS3 transitions courtesy of Daniel Eden so this will look way better on a modern browser such as Chrome, Safari, or Firefox. This will be more of an overview than a tutorial, but I've commented the source code in the demo area if you're wondering about any particular step.
1) Embed the video
This is probably an obvious step, but don't forget you need to use our HTML embed code and make sure you have apiOn=true in the flashvars.2) Add your DIVs
I added two divs above the video: one containing the form, and another empty one which will be the semi-transparent overlay that will cover the video. At this stage you can line everything up before you hide it with CSS or jQuery.3) Set the timer
Now it's time to fire up the API. Here we locate the video, and set off a timer.function vzaarPlayerReady() {
vzPlayer = document.getElementById("video");
intVal = window.setInterval( "checkTime()", 500 );
}
In the checkTime() function we use vzPlayer.getTime() to check once the timer's gone over 5 seconds, and then set off the chain of events that follow. In a nutshell, here's what happens at that point:
1. Call vzPlayer.pause(); to stop the video.
2. Fade in the overlay div to obscure the video.
3. Do the fancy CSS3 transition that brings up our capture form.
4) Capture those emails
There is no Step 4. At least not in my demo, because I'm not capturing your email addresses. That would be wrong. The missing step here would be an AJAX call that validates and sends the info to your database. I won't go into it, but you can find a great tutorial at net tuts.5) Clean up
We've got their info now, so it's just a matter of hiding the form and overlay - with typical panache, of course - and then sending them on their merry way with a call to vzPlayer.play2(); so that they can see the rest of your video.Wrapping up
So, there we go! A brief overview of harnessing the vzaar JavaScript API to rally your viewers into action. Of course, you could do anything with the form you liked: maybe ask them to rate the video, or capture more detailed information than just name and email.As an addendum, I should mention that this trick is designed to be used primarily for capturing leads, not securing your videos . There are ways for tech savvy folks to get around the email capture, so I wouldn't recommend using this technique alone to gate your video content, but when used as a marketing tactic you have nothing to lose and tons of qualified leads to gain!
