Vidyard recently switched to a new user interface. Click here to compare the previous and current menu.

Create a Pardot Form in a Vidyard Event that will resume play after submission

The Goal 

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

  • Appears pre-roll or mid-roll
  • Can't be skipped
  • Displays the full set of MAP (Marketing Automation Platform) fields.
  • Able to be styled using MAP HTML/CSS tools.
  • Captures lead data on the same MAP cookie as other landing pages. (Preventing multiple records from being created for the same contact).
  • Progressive profiling achievable.

The Problem

There are three main options for sending Event data to a MAP:  an embedded form, an iframed form and a Vidyard form. However, none of these three options can satisfy all 6 of the above requirements. Here's why: 

  • Embedded MAP forms can't be styled, be progressive or prevent duplicated records. 
    • Embedded MAP forms sit on the Vidyard domain, so a web browser would assign a different cookie to the viewer than it would if they visited the MAP's native domain.
    • We cannot design the form using the MAP's HTML/CSS tools with this method. 
  • Iframed MAP forms do not provide an option to continue playback after submitting:
    • Iframed MAP forms don't allow viewers to continue playback after the form is submitted. In theory, this could be solved by placing a 'resume video' button on the MAP form submission confirmation page, and include references to the Vidyard player. 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 choices to either enabling a Vidyard Skip button, or manually adding a timed Resume button using Javascript, 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 can't collect data for all available MAP fields:
    • Vidyard forms currently cannot send more than a few details to the MAP, such as name, email & company name.

The Solution

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

Here are the steps required to iframe a Pardot form into a Vidyard event while having it resume play after submission and still pass data to Pardot.

Create a Pardot form as desired until step 4 "Completion Actions"

During the "Completion Actions" setup stage of your form, add the code below to the source editor of the "Thank You Content" tab or directly into the "Thank You Code" tab.

Thank You Code tab in Step 4 of Pardot form Creation

 

Editing the HTML for the Act-On form.

<script type="text/javascript">//<![CDATA[
console.log("Confirmed Submission");
window.parent.postMessage("resumePlay","*");
// ]]></script>

Add your form to a Pardot Landing Page.

Get the "Link" for the landing page and iframe it into the event.

Add the event listener code to close the event and continue playback. 

<!-- Continue Playback Script --><script type='text/javascript'>
function receiveMessage(event){
   if (event.data=="resumePlay"){
      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), '*');
   }
}
window.addEventListener("message", receiveMessage, false);
</script>

Was this article helpful?

Can’t find what you’re looking for? Please contact us below.

Email Vidyard Support
Why you didn't like the article?
  • No, Thanks