The YouTube example in it’s entirety

<!DOCTYPE html>
<html lang="en-us">
<head itemscope itemtype="http://schema.org/WebSite">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
<link rel="shortcut icon" href="http://www3.gehealthcare.com/img/favicon.png" type="image/x-icon" /> 
<title>GE Healthcare | Centricity| {{my.Asset-type}}</title>
<meta charset="utf-8">
<meta name="author" content="{{my.Metadata-Author}}">
<meta name="keywords" content="{{my.Metadata-Keywords}}">
<meta name="description" content="{{my.Metadata-Description}}"> 
<link rel="stylesheet" type="text/css" media="all" href="/css/mktLPSupportCompat.css">
 <style>
 #footer-div{
 height: 300px;
 }
 </style>
 </head>
 <script src="//app-aba.marketo.com/js/forms2/js/forms2.min.js"></script> 
 <script type="text/html" id="form-html"><form id="mktoForm_{{my.update-info-form}}"></form></script> 
<script type="text/html" id="preform-html"><p>{{my.Pre-Form default=Please fill out the form below to access the requested information}}</p></script> 
<script type="text/javascript" src="https://app.marketo.com/js/public/jquery-latest.min.js"></script>
<script type="text/html" id="postform-html">{{my.Post-Form}}</script>
 <body>
 <div id="topdiv">
 <a href="{{my.Logo-URL}}" title="Return to {{my.Business Category}} page">
 <img src="http://landing1.gehealthcare.com/rs/005-SHS-767/images/IMG-Mono-GEHC-cyan.png" id="logo" alt="GE Healthcare - {{my.Business Category}}">
 </a>
 </div> <!--TopDiv-->
 <div id="blue-nav">
 <div class="column-width">
 
 <div id="breadcrumb" class="breadcrumb">
 <ul itemscope itemtype="http://schema.org/BreadcrumbList">
 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="breadcrumb-item">
 <a class="breadcrumb-link" itemprop="item" href="http://www3.gehealthcare.com/">
 <span itemprop="name">GE Healthcare</span></a>
 <meta itemprop="position" content="1">
 </li>
 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="breadcrumb-item">
 <a class="breadcrumb-link" itemprop="item" href="{{my.Breadcrumb 2 - URL}}">
 <span itemprop="name"> {{my.Breadcrumb 2 - Category}}</span></a>
 <meta itemprop="position" content="2">
 </li> 
 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="breadcrumb-item">
 <a itemprop="item" class="breadcrumb-link" href="{{my.Breadcrumb 3 - URL}}">
 <span itemprop="name"> {{my.Breadcrumb 3 - Solution}}</span></a>
 <meta itemprop="position" content="3">
 </li>
 <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="breadcrumb-item">
 <a class="breadcrumb-link" itemprop="item" href="{{my.Breadcrumb 4 - URL}}">
 <span itemprop="name"> {{my.Breadcrumb 4 - Product}}</span></a>
 <meta itemprop="position" content="4">
 </li> 
 </ul> 
 </div>
 </div>
 </div><!--Blue Nav-->
 <div id="column">
 
 
 
 <div id="middle" itemscope itemtype="http://schema.org/Product">
 <div id="rectangle">
 <div class="box" id="body-left">
 <div id="asset-type"><h3>{{my.Asset-type}}</h3></div>
 <div id="headline" itemprop="description"><h1>{{my.Body-headline}}</h1></div><!--Headline-->
 <div id="left-side-copy">{{my.Body-copy}}</div>
 <div id="contactus-box" style="cursor: pointer;" onclick="lightboxContact();">
 <div id="contactus-text" class="vertical-center">
 Contact Us
 </div>
 </div>
 
 </div><!--left-side-container-->
 <div id="body-right" class="box">
 <div id="preform-div" style="z-index: 100;">
 <div id="player"></div>
 </div> 
 <div id="form-div" class="form"></div>
 <div id="postform-div"></div>
 </div><!---Body-Right Close-->

</div><!--Rectangle-->
 </div><!--Middle Div-->
 </div><!--Column-->
<div class="clear"></div> 
{{my.HCIT-Footer-Div}}
 <div class="mktoContent"></div>
<style>
 #formContainer {
 background: -webkit-radial-gradient(#d7e0ef, #e8eaed); /* Safari 5.1 to 6.0 */
 background: -o-radial-gradient(#d7e0ef, #e8eaed); /* For Opera 11.6 to 12.0 */
 background: -moz-radial-gradient(#d7e0ef, #e8eaed)); /* For Firefox 3.6 to 15 */
 background: radial-gradient(#d7e0ef, #e8eaed); /* Standard syntax (must be last) */
 margin: 0 auto;
 }
 
 </style> 
<div id="mainFormWrapper" class="vertical-center">
 <div id="formContainer" class="vertical-center">
 <div style="cursor: pointer;" id="formClose">CLOSE</div>
 <div id="formHeader"><h1>{{my.Modal Header}}</h1>
 <p>
 {{my.Modal Text}} 
 </p>
 </div>
 <div id="spacer"></div>
 <div id="verifyInfo" style="z-index: 40; padding: 20px;">
 <p>
 If you'd like to be contacted by a GE Rep to discuss EDI, please confirm your information below:
 </p><br />
 <div id="personalInfo">
 <p> 
 <span style="font-size: 80%; font-weight: bold; font-color: {{my.GE Brand Color}}; padding-left: 10px;">
 <ul style="list-style-type:none;">
 <li><span style="width: 100px; float: left;">Name:</span>{{lead.First Name}} {{lead.Last Name}}</li>
 <li><span style="width: 100px; float: left;">Company:</span>{{company.Company Name}}</li>
 <li><span style="width: 100px; float: left;">Email:</span>{{lead.Email Address:default=Please Upate Info to include your email address}}</li>
 <li><span style="width: 100px; float: left;">Phone:</span>{{lead.Phone Number:default=Please Upate Info to include your phone number}}</li>
 <li><span style="width: 100px; float: left;">Postal:</span>{{lead.Postal Code:default=Please Upate Info to include your postal code}}</li>
 </ul>
 </span>
 </p>
 </div> 
<br />
<br /> 
 <div id="contactPreferenceButtons" style="padding-top: 20px;">
 <div class="vertical-center" id="confirmInfoRequestContact" style="padding: 5px; width: 300px; height: 25px; border: 1px; border-color: #000000; border-style: solid; cursor: pointer;" onclick="requestContact();">
 Confirm Information & request contact
 </div>
 <br />
 <div class="vertical-center" id="updateInfo" style="padding: 5px; width: 300px; height: 25px; border: 1px; border-color: #000000; border-style: solid; cursor: pointer;" onclick="updateInfo = 1;">
 Update Contact Information
 </div>
 <br />
 <div class="vertical-center" id="contactNoThankYou" style="padding: 5px; width: 300px; height: 25px; border: 1px; border-color: #000000; border-style: solid; cursor: pointer;" onclick="document.getElementById('mainFormWrapper').style.display='none'; player.playVideo(); ">
 No Thank You
 </div>
 <form id="mktoForm_{{my.hidden-submit-form}}" style="display: none;"></form>
 </div> <!-- contactPreferenceButtons -->
 </div> <!--Verify Info -->
 <div id="mainFormDiv"></div>
 <div id="mainFormDivBottomSpace"></div>
 </div>
 </div>
<div id="exitbox">
 <div id="exitboxclose" onclick="document.getElementById('exitbox').style.display='none';">
 X
 </div>
 {{my.Exit Box}}
 </div> 
<script type="text/javascript" async src="http://www.google-analytics.com/ga.js"></script>

<script type="text/javascript">
 
 
$ja = jQuery.noConflict();
$ja(document).ready(function(){
 var programID = getUrlParameter("program-id");
 if(programID.length == 0)
 programID = getUrlParameter("programid");
 setCookie(programID, "program-id", window.location.hostname.substring(window.location.hostname.indexOf(".")), 7);
});
function getUrlParameter(sParam)
{
 sPageURL=window.location.search.substring(1);
 var sURLVariables = sPageURL.split('&');
 for (var i = 0; i < sURLVariables.length; i++)
 {
 var sParameterName = sURLVariables[i].split('=');
 if (sParameterName[0].toLowerCase() == sParam.toLowerCase())
 return sParameterName[1];
 }
 return "";
}
function setCookie(programID, cookieName, cookieDomain, expirationDays) {
 if(typeof(programID) != 'undefined' && programID != "")
 $ja.cookie("program-id", programID,{ domain: cookieDomain , path: '/', expires: expirationDays });
}
 
 
 
//Show the popup on MouseOut
 
 function addEvent(obj, evt, fn) { //Cross Browser event handler. Needed to ensure it works on all browsers
 if (obj.addEventListener) {
 obj.addEventListener(evt, fn, false);
 }
 else if (obj.attachEvent) {
 obj.attachEvent("on" + evt, fn);
 }
} 
 
 var showAlert = 1; //Make sure the pop-up only shows once
 var showModalAgain = 1 //Turns the modal on 
 var emailAddress = '{{lead.Email Address}}';
 var firstName = '{{lead.First Name}}';
 var postalCode = '{{lead.Postal Code}}';
 var showMouseOut = 1;
 var updateInfo = 0;
 var formSubmitted = 0;
 
addEvent(document, "mouseout", function(e) {
 if(showMouseOut != 0) {
 e = e ? e : window.event;
 var from = e.relatedTarget || e.toElement;
 if (!from || from.nodeName == "HTML") {
 document.getElementById("exitbox").style.display = "block";
 showMouseOut = 0;
 }
 }
});
 
 (function() {
 var didInit = false;
 function initMunchkin() {
 if(didInit === false) {
 didInit = true;
 Munchkin.init('666-XXX-666');
 }
 }
 var s = document.createElement('script');
 s.type = 'text/javascript';
 s.async = true;
 s.src = '//munchkin.marketo.net/munchkin.js';
 s.onreadystatechange = function() {
 if (this.readyState == 'complete' || this.readyState == 'loaded') {
 initMunchkin();
 }
 };
 s.onload = initMunchkin;
 document.getElementsByTagName('head')[0].appendChild(s);
})();

document.getElementById("mainFormDiv").innerHTML = document.getElementById("form-html").innerHTML;

function closeExitBox() {
 document.getElementById('exitbox').style.display='none';
}
 
function showModal() {
 if (showModalAgain != 0) {
 showMouseOut = 0;
 document.getElementById("mainFormWrapper").style.display = 'block';
 document.getElementById("mainFormWrapper").style.zIndex = '30';
 document.getElementById("mainFormDiv").style.zIndex = '40';
 if ((emailAddress == '') || (firstName == '' ) || (postalCode == '') || (updateInfo == 1)) {
 showUpdateForm();
 $ja("#verifyInfo").fadeOut();
 $ja('#verifyInfo').replaceWith( '<div id="left-side-copy" style="padding-left: 20px;"><p>If you would like to learn more, please fill out the form below.</p></div>' );
 $ja("#verifyInfo").fadeIn("slow");
 $ja("#verifyInfo").append($ja("#mainFormDiv"));
 document.getElementById("mainFormDiv").style.display = 'block';
 };
 }
}

$ja("#formClose").click(function(){
 $ja("#mainFormWrapper").fadeOut();
 document.getElementById("mainFormWrapper").style.zIndex='0';
 if ((emailAddress == '') || (firstName == '' ) || (postalCode == '') || (updateInfo == 1)) { 
 $ja('#verifyInfo').replaceWith( '<div id="left-side-copy" style="padding-left: 20px;"><p>If you would like to learn more, please fill out the form below.</p></div>' );
 $ja("#left-side-copy").fadeIn("slow");
 $ja("#left-side-copy").append($ja("#mainFormDiv"));
 document.getElementById("mainFormDiv").style.display = 'block'; 
 } else {
 $ja("#left-side-copy").append($ja("#verifyInfo"));
 }
 player.playVideo(); 
 showMouseOut = 0; //Hide MouseOut from showing
 showModalAgain = 0; //Hide from showing again
 document.getElementById('contactus-box').style.display= 'none'; //hide the CU box since a form is already up
 } 
 );


$ja("#updateInfo").click(function(){
 showUpdateForm();
 $ja("#verifyInfo").fadeOut();
 $ja('#verifyInfo').replaceWith( '<div id="left-side-copy" style="padding-left: 20px;"><p>If you would like to learn more, please fill out the form below.</p></div>' );
 $ja("#verifyInfo").fadeIn("slow");
 $ja("#verifyInfo").append($ja("#mainFormDiv"));
 document.getElementById("mainFormDiv").style.display = 'block';
 updateInfo = 1;
 showMouseOut = 0; //Hide MouseOut from showing
 });
 
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.

var player;

function onYouTubeIframeAPIReady() {
 player = new YT.Player('player', {
 videoId: '{{my.youtube-video-id}}',
 height: '390',
 width: '640',
 events: {
 'onReady': onPlayerReady,
 'onStateChange': onPlayerStateChange
 }
 });
}

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
 event.target.playVideo();
}

/** YouTube API
 -1 (unstarted)
 0 (ended)
 1 (playing)
 2 (paused)
 3 (buffering)
 5 (video cued)
 **/


function onPlayerStateChange(event) {
 if ((event.data === 2) && (showModalAgain != 0)) {
 showModal();
 }
}
 
 
function showUpdateForm() {
 MktoForms2.loadForm("//app-aba.marketo.com", "666-XXX-666", {{my.update-info-form}},
 function(form) {
 form.vals({"Phone":"{{lead.Phone Number}}", 
 "FirstName":"{{lead.First Name}}", 
 "LastName":"{{lead.Last Name}}", 
 "Company":"{{company.Company Name}}", 
 "Email":"{{lead.Email Address}}",
 "City":"{{lead.City}}",
 "State":"{{lead.State}}", 
 "Title":"{{lead.Job Title}}", 
 "PostalCode":"{{lead.Postal Code}}", 
 "Address":"{{lead.Address}}"
 });
 
 var formEl = form.getFormElem()[0];
 
 form.onSuccess(function() {
 form.getFormElem().hide();
 $ja("#mainFormWrapper").fadeOut("slow");
 document.getElementById("mainFormWrapper").style.zIndex='0';
 $ja("#left-side-copy").fadeOut();
 $ja("#left-side-copy").fadeIn("slow");
 document.getElementById("left-side-copy").innerHTML = '<p>Thank you for your interest in GE Healthcare Digital.</p>';
 player.playVideo(); 
 showModalAgain = 0;
 showMouseOut = 0;
 return false;
 formSubmitted = 1;
 });
 });
}


function toTitleCase(str)
{
 return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
}
 
 
 
 var LinkURL = "{{my.Destination-URL}}"; 
 var camp = "{{my.Campaign ID}}";
 
function lightboxContact() {
 
 MktoForms2.loadForm("//app-aba.marketo.com", "406-TVZ-560", {{my.update-info-form}}, function (form) { 
 MktoForms2.lightbox(form).show();
});
} 
 
 var assettype = "{{my.Asset-Type}}";
 var propAssetName = toTitleCase(assettype);
 var propAssetNameNoNum = propAssetName.replace(/[0-9]/g, '');


function requestContact() {
$ja("#contactPreferenceButtons").replaceWith('<div id="contactPreferenceButtons"><p>Thank you. Your submission has been received.</p></div>');

MktoForms2.loadForm("//app-aba.marketo.com", "406-TVZ-560", {{my.hidden-submit-form}}, 
function(form) {
var myForm = MktoForms2.getForm({{my.hidden-submit-form}});
myForm.addHiddenFields({
"Email":"{{lead.Email Address}}",
"Company": "{{company.Company Name}}",
"SE_DemoQuestion-Practice":"Request Engagement"
});
myForm.submit();
 
 form.onSuccess(function() {
 form.getFormElem().hide();
 $ja("#mainFormWrapper").fadeOut("slow");
 document.getElementById("mainFormWrapper").style.zIndex='0';
 $ja("#left-side-copy").fadeOut();
 $ja("#left-side-copy").fadeIn("slow");
 document.getElementById("left-side-copy").innerHTML = '<p>Thank you for your interest in GE Healthcare Digital.</p>';
 player.playVideo(); 
 showModalAgain = 0;
 showMouseOut = 0;
 return false; 
 formSubmitted = 1;
 
}) ;
});
}


</script> 
</body>
</html>

Marketo presentation – forms with custom events

Leave a Reply

Your email address will not be published. Required fields are marked *