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:

  1. In HapYak, add an iframe annotation to your video where you want the form to appear.
  2. Click the HTML tab. Replace the default HTML with the HTML TEMPLATE below.
  3. Copy the Full Page Embed Code for the form from TypeForm.
  4. Paste your TypeForm embed code where it says <!-- ***Paste your Typeform embed code here*** -->
  5. Click Submit.
  6. 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.

1. 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>
Did this answer your question?