Steps
Copy the Embed Code for your MailChimp List.
Add an iframe annotation to your HapYak project.
Click the HTML tab. Replace the default HTML with the HTML TEMPLATE below.
Replace the line “<!-- Replace this line with your Mailchimp embed code -->” with your Mailchimp embed code.
Click Submit.
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.
Increase the Duration
Set Pause: Y
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>
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.