Passing Data from Externally Hosted Lead Forms into Embedded Walnut Demo URLs — Setup Guide with Code Samples

Overview

If you’re embedding Walnut demos or playlists using an <iframe> embed code and want to capture lead form data from a form hosted outside of Walnut (for example, on your marketing website), this guide is for you.

By passing form data—such as first name, last name, and email—into your embedded demo or playlist via URL parameters, you can identify viewers, personalize the experience, and track engagement.

This guide provides step-by-step instructions for configuring the external form setup for:

• Pass Data from External HubSpot Forms
• Pass Data from External Marketo Forms

Maximize Your Results 🎯

For the most complete tracking and marketing automation, Walnut recommends:

• Hosting your lead forms within your demos, if possible.
• Enabling the HubSpot or Marketo integration in Walnut > Integrations.

Hosting your lead forms within you Walnut demos ensures that:

• Enriched demo session data (e.g., engagement, drop-off points, views) is synced directly to the corresponding contact record in HubSpot or Marketo.
• If you pass data from an external form, you’ll still capture the viewer’s email and create a lead — but you won’t receive enriched demo engagement data in your CRM. In this case, demo and playlist session data will only be available in Walnut Insights.
• Enriched demo session data is only available in your CRM if the lead form is hosted within a Walnut demo.

👉 Want to embed a lead form directly inside your Walnut demo? Follow this guide.

When To Use this Setup

• Your lead form lives on an external landing page or marketing site and you want to avoid “double gating” your demo or playlist.

• This setup is also ideal if you want to gate a playlist with your own external form instead of using Walnut email gate — especially since embedded lead forms aren’t yet available for playlists.

Before You Begin

Before setting up this configuration, ensure you have:

• An embed code for the Walnut demo or playlist you plan to use.

• A HubSpot or Marketo form that will collect viewer information.

• Access to the codebase of your marketing site or landing page, or the ability to work with your development/web team to make code changes.

You’ll need all of the above to add your externally hosted form to the page and configure it to pass form data into the embedded Walnut demo or playlist.

Quick Start Guide

Sample Walnut Embed Code:

<iframe
    id="walnut_iframe"
    name="walnut_iframe"
    src="https://app.teamwalnut.com/player/?demoId=ab34e3bf-7727-4c94-9295-c688576c17bb&showGuide=true&showGuidesToolbar=true&showHotspots=true&source=app"
    title="Walnut embedded demo"
    style="border: 0; display: none;"
    allow="fullscreen"
    allowfullscreen="true"
    loading="eager"
    sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-downloads allow-popups-to-escape-sandbox"
    width="100%"
    height="100%"
    frameborder="0">
 </iframe>

Sample Setup for HubSpot Forms

1. Place your Walnut embed on the same page as your form.
   • Use the demo or playlist embed code from Walnut.
   • Give the <iframe> a stable ID (e.g., id="walnut_iframe").
   • In this example, we’ll use: id="walnut_iframe"
2. Update the style attribute in the embed code.
   • Replace the default style with: style="border: 0; display: none;"
   • The iframe must start hidden (display:none;) and will be shown after a successful form submission.
3. Add the Sample HubSpot Form Data Script.
   • Place the script directly below the HubSpot form script in your site’s HTML.
   • Update the const baseURL variable in the script by replacing YOUR_DEMO_ID with the full demo or playlist URL from your Walnut embed code.

Sample HubSpot Form Data Script

<!-- HubSpot form embed example (place your own form code here) -->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<div id="hubspot-form"></div>

<script>
// Note:
// - This sample supports passing first name, last name, and email.
// - Capture extra fields by:
//   1) Adding a variable (e.g., const company = getValue('company');)
//   2) Appending it to fullURL (e.g., &company=${company})
// - The Walnut iframe must start hidden (display:none;) and will be shown after submit.

window.addEventListener('message', function (event) {
  if (
    event.data &&
    event.data.type === 'hsFormCallback' &&
    event.data.eventName === 'onFormSubmit'
  ) {
    const formData = event.data.data; // Array of { name, value }

    // Helper to safely read & encode a field by internal name
    const getValue = (key) =>
      encodeURIComponent(
        (formData.find((f) => f.name === key) || {}).value || ''
      );

    // Required fields
    const firstName = getValue('firstname');
    const lastName  = getValue('lastname');
    const email     = getValue('email');

    // Example: capture an additional field (uncomment to use)
    // const company = getValue('company');

    // Base URL: your Walnut iframe URL without user params
    const baseURL = 'https://app.teamwalnut.com/player/?demoId=YOUR_DEMO_ID&showGuide=true&showGuidesToolbar=true&showHotspots=true&source=app';

    const fullURL =
      `${baseURL}&firstname=${firstName}&lastname=${lastName}&email=${email}`
      // + `&company=${company}`; // append if adding extra fields

    const iframe = document.getElementById('walnut_iframe');
    iframe.src = fullURL;
    iframe.style.display = 'block'; // Reveal the demo after form submit
  }
});
</script>

🗒️ Notes:

• The sample supports first name, last name, and email by default.
• Listens for HubSpot’s postMessage callback (hsFormCallback). Ensure your HubSpot form is embedded on the page.
• You can adjust the script to capture additional fields by adding new variables and appending them to the iframe URL.
• The Walnut iframe must start hidden (display:none;) and will be shown after the form is submitted.

Sample Setup for Marketo Forms

1. Place your Walnut embed on the same page as your form.
   • Use the demo or playlist embed code from Walnut.
   • Give the <iframe> a stable ID (e.g., id="walnut_iframe").
   • In this example, we’ll use: id="walnut_iframe"
2. Update the style attribute in the embed code.
   • Replace the default style with: style="border: 0; display: none;"
   • The iframe must start hidden (display:none;) and will be shown after a successful form submission.
3. Add the Sample Marketo Form Data Script.
   • Place the script directly below the HubSpot form script in your site’s HTML.
   • Update the const demoURL variable in the script by replacing YOUR_DEMO_ID with the full demo or playlist URL from your Walnut embed code.

Sample Marketo Form Data Script

<!-- Marketo form embed example (place your own form code here) -->
<script src="//APP-SUBDOMAIN.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_1234"></form>

<script>
// Note:
// - This sample supports passing first name, last name, and email.
// - Capture extra fields by:
//   1) Adding a variable (e.g., const company = encodeURIComponent(values.company || values.Company || '');)
//   2) Appending it to demoURL (e.g., &company=${company})
// - The Walnut iframe must start hidden (display:none;) and will be shown after submit.

MktoForms2.loadForm("//APP-SUBDOMAIN.marketo.com", "YOUR_MUNCHKIN_ID", 1234, function(form) {
  form.onSuccess(function(values) {
    const iframe = document.getElementById('walnut_iframe');

    // Required fields
    const firstName = encodeURIComponent(values.firstname || values.FirstName || '');
    const lastName  = encodeURIComponent(values.lastname || values.LastName || '');
    const email     = encodeURIComponent(values.email || values.Email || '');

    // Example: capture an additional field (uncomment to use)
    // const company = encodeURIComponent(values.company || values.Company || '');

    // Walnut iframe URL with required parameters
    const demoURL =
      'https://app.teamwalnut.com/player/?demoId=YOUR_DEMO_ID&showGuide=true&showGuidesToolbar=true&showHotspots=true&source=app'
      + `&firstname=${firstName}&lastname=${lastName}&email=${email}`
      // + `&company=${company}`; // append if adding extra fields

    iframe.src = demoURL;
    iframe.style.display = 'block'; // Reveal the demo after form submit

    return false; // Prevent Marketo's default redirect
  });
});
</script>

🗒️ Notes:

• Supports first name, last name, and email by default.
• You can add additional fields by creating new variables in the script and appending them to the iframe URL.
• Uses the Marketo Forms 2.0 API (MktoForms2) and prevents the default redirect.
• The Walnut iframe must start hidden (display:none;) and will be shown after submit.

FAQs

Do I Have to Use HubSpot or Marketo for This Setup?

• No. While this guide includes scripts for HubSpot and Marketo forms, you can adapt the same logic for other form providers. You’ll need to ensure your provider supports capturing form data on submit and allows you to run custom scripts.

Can I Capture More Than First Name, Last Name, and Email?

• Yes. The sample scripts support these three fields by default, but you can add additional parameters by creating new variables in the script and appending them to the iframe URL.

Will I Still Get Enriched Session Data in HubSpot or Marketo If I Use an External Form?

• No. If you pass data from an external form without hosting the form inside Walnut and enabling the integration, you’ll capture the viewer’s email and create a lead, but enriched session data (e.g., engagement, drop-off points, views) will only be available in Walnut Insights.

Where Can I Find My Demo or Playlist Embed Code?

• In Walnut, open your demo or playlist, select Share, then choose the Embed option. Copy the iframe code provided.

> Learn more about Embedded Demos & Playlists