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.