Create a HubSpot 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 (a CTA) using an iframed form in HubSpot with the following requirements:

• Appears pre-roll or mid-roll
• Cannot 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:

1. Embedded MAP forms cannot be styled, be progressive, or prevent duplicated records:
   • Embedded MAP forms sit on the Vidyard domain, so a web browser assigns a different cookie to the viewer than it would if they had visited your MAP's native domain.
   • We cannot design or style the form using the MAP's HTML/CSS tools with this method.
2. Iframed MAP forms do not provide an option to continue playback after submitting:
   • 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 would be submitted. Both of these options ultimately allow the viewer to skip filling in the forms presented to them.
3. Vidyard forms cannot 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.

There are three parts to this solution:

Part 1: Create a Hubspot form on a landing page template
Part 2: Create a Hubspot landing page with your template
Part 3: Configure an action in Vidyard

Part 1: Create a Hubspot form on a landing page template

1. Login to Hubspot. Create and design a form of your choice (Marketing > Lead Capture > Forms)
2. Once complete, click Options and add a Thank you Message.
   
3. Click Update to save your changes.
4. You will then see a pop up with the embed code for the form. Click Copy to save the embed code to your clipboard. 
   
   If you've already closed this pop up, you can always access the embed code again by clicking Share. 
   
   

   Note: Hold onto the embed code (you may want to paste it into a blank test document), as you will need it after the landing page has been created. 

5. Create a new landing page template:

   • From the HubSpot menu, click Marketing> Files and Templates> Design Tools.

   • From the top left corner, choose File > New File.
     

   • For "what would you like to build today?", choose Drag and Drop, then click Next.
     

   • Under Template Type, choose Page, then click Create.
     

6. From the Add menu on the right, choose HTML and drag it into your landing page.
   

7. Paste the embed code from your Hubspot form into the HTML editor.

8. Add the following script to the form code, as shown in the image below:

   ,
       onFormSubmitted: function($form) {
          console.log("Confirmed Submission");
      window.parent.postMessage("resumePlay","https://play.vidyard.com");
          }

   

9. Click Publish to save your changes.

Part 2: Create a Hubspot landing page with your template

1. Using your new template, create and publish a landing page
   • From the Hubspot menu, click Marketing > Website > Landing Pages
   • Click Create > Landing Page
   • Select your new template from the template library
   • Enter a page name, then click Create
2. Add an HTML title and Page URL to your landing page
   • From your landing page preview, select Settings
   • Enter a Page title and Page URL
   • Click Publish
     
3. Open your published landing page and copy the URL (you will need this later when creating an action in Vidyard).

Note: Ensure that you have SSL enabled for your Hubspot 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 3: Create a new Action in Vidyard

In a new browser tab, sign in to Vidyard.

1. From the Vidyard dashboard, click on Actions.
2. Select New Action, then choose Fullscreen > Create.
   • Make sure to provide a name and description for your action.
3. 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 Hubspot 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>

4. Add the following script after the iframe code.
   • Add the domain of your HubSpot landing page into the space indicated below ("Your landing page DOMAIN HERE")

     <!-- 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};
        window.parent.postMessage(JSON.stringify(playerData), 'https://play.vidyard.com');
         }
        }
      window.addEventListener("message", receiveMessage, false);
     </script>

     
5. Click Save to save your changes.
6. Click Assign to place the action on a video.
7. To test the action, open the sharing page for the video to which the action assigned.
   • To do this, click Share > Copy Link on that video in your Vidyard library.
   • 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.