All Collections
Custom Annotations
Add a Typeform to a Video
Add a Typeform to a Video
Patrick Farley avatar
Written by Patrick Farley
Updated over a week ago

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.


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)


<!DOCTYPE html>
 <meta charset="utf-8">
  <title>TypeForm Widget for HapYak</title>
<link rel="stylesheet" type="text/css" href="">
<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] -->
<script src="//"></script>
<script type="text/javascript" src="//"></script>
$(document).ready(function() {
//this can be manually changed to your desired height
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
//this is needed if the iframe isn't configured to pause or gate
$(".hy_widget").hover(function() {
function resumeVideo() {
//remove the pause-on-hover
$(".hy_widget").unbind('mouseenter mouseleave')
//hide the form
//resume the video

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.

Did this answer your question?