Create an Oracle Eloqua form that resumes playback 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 Action (which is when a player displays a Call to Action, or CTA) using an iframed form in Oracle Eloqua 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 action. This allows the parent and child iframes to communicate to each other via post messaging rather than Javascript.

1. Create your form and make sure the processing is not set to redirect upon form submission.
2. Save the form and view the form HTML.
   
3. Copy and paste the form HTML into a blank text document for adding to your Landing Page later.
4. Create a new "Blank HTML Landing Page" and add your Form HTML
5. Ensure the following line of code is on your page. If it is not, paste into your landing page HTML:

   <script   src="https://code.jquery.com/jquery-1.12.2.min.js"   integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk="   crossorigin="anonymous"></script>

6. Next, add the following script to your landing page HTML below the form HTML:

   <script>
     $( "#form40" ).submit(function() {
       console.log("Confirmed Submission");
       window.parent.postMessage("resumePlay","https://play.vidyard.com");
     });
   </script>

7. Change the form ID (above) to reflect your Eloqua form ID.
   Note: You can find the form ID by using a search (Ctrl or Cmd + F) and searching for "<form" then looking somewhere in this snippet:
   
8. Choose a microsite for your landing page and save it. 
9. Copy the URL for later use when embedding the page in your action.
10. Add the following code to your action in Vidyard. Replace the section that says "your landing page URL HERE" with your landing page URL (make sure to keep the quotation marks).
    • Replace the section that says "your landing page DOMAIN HERE" with the domain of your landing page, but not the full URL.
    • For example, if your landing page URL is "https://xxx.eloqua.com/page", replace "your landing page URL HERE" with "https://xxx.eloqua.com/page" and replace "your landing page DOMAIN HERE" with "https://xxx.eloqua.com".

      <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>
      
      <!-- Continue Playback Script --><script type='text/javascript'>
      function receiveMessage(event){
       if (event.data=="resumePlay" && event.origin=="your landing page DOMAIN HERE"){
          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};
          setTimeout(function() {
            window.parent.postMessage(JSON.stringify(playerData), 'https://play.vidyard.com');
          }, 1000)
        }
      }
      window.addEventListener("message", receiveMessage, false);
      </script>