Typeform is a free online survey and form builder. You can now add these forms directly on top of a video using HapYak. Here's how:
In HapYak, add an iframe annotation to your video where you want the form to appear.
Click the HTML tab. Replace the default HTML with the HTML TEMPLATE below.
Copy the Full Page Embed Code for the form from TypeForm.
Paste your TypeForm embed code where it says <!-- ***Paste your Typeform embed code here*** -->
Click Submit.
Click Done.
Tips
By default the form will be shown for 3 seconds. You have the following options to increase the users ability to engage with it.
Increase the Duration
2. Set Pause: Y
3 Set Gate: Y (Note: Set either Pause or Gate, not both)
HTML TEMPLATE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TypeForm Widget for HapYak</title>
<link rel="stylesheet" type="text/css" href="http://hapyak_demos.s3.amazonaws.com/css/hy_widget_typeform.css">
</head>
<body>
<div class="hy_widget">
<div class="hy_widget_typeformTop">Click here when done. <button onclick="resumeVideo()">Resume Video</button></div>
<!-- [BEGIN Typeform embed code] -->
<!-- ***Paste your Typeform embed code here*** -->
<!-- [END Typeform embed code] -->
</div>
</body>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="//d2qrdklrsxowl2.cloudfront.net/js/hapyak-iframe.js"></script>
<script>
$(document).ready(function() {
//this can be manually changed to your desired height
$(".typeform-widget").height("450px");
hapyak.context.addEventListener('iframeshow', function () {
//dynamically ensure the iframe will fit the typeform
hapyak.context.height = document.body.querySelector('.hy_widget').offsetHeight;
//ensure the widget is visible - probably not needed
$(".hy_widget").show();
//this is needed if the iframe isn't configured to pause or gate
$(".hy_widget").hover(function() {
hapyak.context.player.pause()
});
});
})
function resumeVideo() {
//remove the pause-on-hover
$(".hy_widget").unbind('mouseenter mouseleave')
//hide the form
$(".hy_widget").hide();
//resume the video
hapyak.context.releaseGate();
hapyak.context.player.play();
}
</script>
</html>
Please Note: this is a Proof of Concept only provided to show the possibilities of the HapYak Platform and should not be taken as an offer to create, edit or maintain custom integration or development.