Steps

  1. Copy the Embed Code for you MailChimp List.
  2. Add an iframe annotation to your HapYak project.
  3. Click the HTML tab. Replace the default HTML with the HTML TEMPLATE below.
  4. Replace the line “<!-- Replace this line with your Mailchimp embed code -->” with your Mailchimp embed code.
  5. Click Submit.
  6. Resize the iframe to fit the embedded Mailchimp form. Click Done

Tip

By default the form will be shown for 3 seconds. You can ensure the form is on screen longer by doing one of the following.

  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>MailChimp Widget for HapYak</title>
<link rel="stylesheet" type="text/css" href="//hapyak_demos.s3.amazonaws.com/css/hy_widget_typeform.css">
<style>
  .hy_widget_content {zoom:1.2;}
</style>
</head>
<body>
  <div class="hy_widget">
    <div class="hy_widget_typeformTop">Click here when done.
      <button onclick="resumeVideo()">Resume Video</button>
    </div>
    <div id="hy_post_target">
      <iframe id="hy_post_target_iframe" name="hy_post_target_iframe"></iframe>
    </div>
    <div id="hy_widget_content">
      <!-- Replace this line with your Mailchimp embed code -->
    </div>
  </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

  //$("form").height("450px");

  initForm();
  hapyak.context.addEventListener('iframeshow', function () {
    //dynamically ensure the iframe will fit the form
    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 initForm() {
  //make all frames post to our frame so they don't escape
  $("form").attr("target", "hy_post_target_iframe");
  $("#hy_post_target_iframe").hide();
  //hide the form and show the post destination on submit
  $("form").submit(function() {
    $("#hy_post_target_iframe").height($(this).height());
    $("#hy_post_target_iframe").width($(this).width());
    $(this).hide();
    $("#hy_post_target_iframe").show();
  });
}

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?