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

Disclaimer: This article is provided for instructional purposes only. Vidyard does not support or guarantee the code. Vidyard also cannot offer support for third-party tools and platforms or technologies such as JavaScript, jQuery or CSS.

The Goal 

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

There are two parts to this solution:

PART 1: Create a landing page that includes a Pardot form
PART 2: Configure an event in Vidyard

PART 1: Create and add a Pardot form to a landing page

1. Login to Pardot to create a new form
   • From the Pardot dashboard, select Marketing > Forms > New Form
   • If you already have an existing form, you may also use that as well.
2. Once you reach Step #4 "Completion Actions," add the following script to the Thank You Code editor
   

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

3. Place your Pardot form in a landing page
   • From the Pardot dashboard, select Marketing > Landing Pages > New Landing Page
   • If you already have an existing landing page template, you may use that as well
4. Open your new landing page and copy the URL (you will need this later when creating an event in Vidyard)

Important: Ensure that you have SSL enabled for your Pardot landing pages. This is required so that your landing page loads using HTTPS.

Your landing page URL should look similar to the following format: https://domainname.com/pagetitle

PART 2: Configure an event in Vidyard

In a new browser tab, sign in to Vidyard.

1. From the Vidyard dashboard, click on Content > Events
   • Select + Add Event > Fullscreen > Confirm
   • Make sure to provide your event with a name and description
2. Select the HTML tab to reveal the source code
   • Delete the placeholder code
   • Copy and paste the below iframe code into the text editor
   • Add the URL of your Pardot landing page into the space indicated below ("src=[Your landing page URL HERE]")

     <style>
      .vidyard-cta-holder .vidyard_padding.no-padding {
      overflow: hidden;
      }
     </style>
     <iframe scrolling="yes" width="99%" height="99%" src=[Your landing page URL HERE]></iframe>

3. Add the following script after the iframe code:

   <!-- 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>

4. Click the Assign tab to place the event on a video.
   • To test the event, open the sharing page for the player that contains the video to which the event was assigned
   • From the Vidyard dashboard, hover over the player, select Share > Copy Link for the Sharing Page.
   • Open the sharing page in a new tab

Note: Depending on the design of your form, you may need to further configure width, height and other variables afterward so that the final product suits your needs.