Skip to main content

On April 3rd, 2017 Vidyard will be switching to a new user interface. Click here to learn more.

Vidyard Knowledge Center

Create a Marketo form that resumes playback after submission

This article is now deprecated, as the functionality mentioned in here is a lot easier to achieve through our Marketo Form Integration: http://knowledge.vidyard.com/User_Guides/Content/Calls_to_Action_through_Events/011_Common_events/Place_a_Marketo_form_in_an_event

The Goal 

To create an Event (which is when a player displays a Call to Action, or CTA) using an iframed form in Marketo with the following variables: 

  • Appears pre-roll or mid-roll.
  • Can't be skipped.
  • Displays the full set of Marketo fields.
  • Able to be styled using your Marketo's HTML/CSS tools.
  • Captures lead data on the same Marketo cookie as other landing pages. (Preventing multiple records from being created for the same contact).
  • Progressive profiling & pre-fill achievable.
  • Will not display if contact is already known to Marketo (optional)

The Problem

There are three main types of forms for capturing contact data that can be used in Marketo:  an embedded Marketo form, an iframed form and a Vidyard form. However, none of these three options can satisfy all 7 of the above requirements. Here's why: 

  • Embedded Marketo forms cannot be styled easily, allow pre-fill, be progressive or prevent duplicated records. 
  • Iframed Marketo forms do not provide an option to continue playback after submitting, or support the New Contact feature:
    In theory, this could be solved by placing a 'resume video' button on the Marketo form submission confirmation page. However, current web browser technology prevents Javascript from controlling iframes on two domains, so the reference to player controls will not function. This limits your choice to either enabling a Vidyard Skip button, or manually adding a Javascript timed Resume button, aiming for it to appear approximately when the form has been submitted. Both of these options would ultimately allow the viewer to skip filling in forms presented to them. 
  • Vidyard forms will not support pre-fill data from Marketo.

The Solution

Our solution to this problem is to use an iframed form, but add some additional code to both Marketo and Vidyard event. This allows the parent and child iframes to communicate to each other via post messaging rather than Javascript. 

  1. Go to your Landing Page editor and paste the following code into an HTML element on the landing page. 

HTML  icon.

<script src="//app-sj04.marketo.com/js/forms2/js/forms2.min.js"></script>
<script>
MktoForms2.whenReady(function(form) {
  console.log(form);
  console.log(form.vals());
    if ( form.vals() && form.vals().Email ) {
      console.log("[VY] Form submitted");
      window.parent.postMessage("removeevent", '*');
      return false;
  }
    form.onSuccess(function(values, followUpUrl) {
      console.log("[VY] Form submitted");
      window.parent.postMessage("removeevent", '*');
      return false;
  });
});
</script>

It should look similar to this:


Note:  If you always want the form to display rather than only if the contact is unknown to Marketo, remove the following lines from the code, before implementing:

<script src="//app-sj04.marketo.com/js/forms2/js/forms2.min.js"></script>
<script>
MktoForms2.whenReady(function(form) {
  console.log(form);
  console.log(form.vals());
    if ( form.vals() && form.vals().Email ) {
      console.log("[VY] Form submitted");
      window.parent.postMessage("removeevent", '*');
      return false;
  }
    form.onSuccess(function(values, followUpUrl) {
      console.log("[VY] Form submitted");
      window.parent.postMessage("removeevent", '*');
      return false;
  });
});
</script>

2. Ensure that the form is added to your page. In order for the form be displayed correctly, it is advisable to place it into the top left-hand corner. Save and Publish.
 

3. Within your Vidyard event, you will need to add the following code after your iframe:

<script type='text/javascript'>
  function receiveMessage(event){
   if (event.data=="removeevent"){
      console.log("Remove event received");
      var ctaId = window.frameElement.id.split('_')[1];
      var playerId = window.frameElement.src.split('/');
      playerId = playerId[playerId.length-3];

      var playerData = {uuid: playerId, event: 'closeCta', id: ctaId, forceClose: true};
      window.parent.postMessage(JSON.stringify(playerData), '*');

      playerData = {uuid: playerId, event: 'disableCta', id: ctaId};
      window.parent.postMessage(JSON.stringify(playerData), '*');
    }
    }
    window.addEventListener("message", receiveMessage, false);
</script>

The iframe code that appears above this, will look something like:

<div style="max-width:640px; max-height:360px; overflow: hidden; padding-top:23%; padding-left:25%;">
<iframe frameborder="0" scrolling="no" width="640" height="360" src="[YOUR URL HERE]"
style="margin-left: -178px; margin-top: -131px;"></iframe></div>

The code in the Event editor is copied over from the article in full.

4. Toggle Skippable to OFF.

By having code set in these two areas, the necessary channel of communication between the two iframes is created, and will result in playback continuing seamlessly after form submission. It also will not display the form if it detects a pre-filled email.

  • Was this article helpful?