Embed a GatedContent Lead Form in Your Demo

<!-- GatedContent Starter Script -->

<script>
/* ---------------------------------------------------------
   STEP 3a: Paste your GatedContent script snippet below.
   Insert code between the lines indicated. 👇
   --------------------------------------------------------- */

// ↓↓↓ Paste your GatedContent script below this line ↓↓↓



// ↑↑↑ Paste your GatedContent script above this line ↑↑↑

// Adjust modal height & hide Walnut integration containers
var css = document.createElement('style');
css.innerHTML = `
  .gcdc-modal-wrapper.open { height: 100vh !important; }
  .walnut-integrations-main { display: none !important; }
`;
document.head.appendChild(css);

// Example Pardot URL (for reference):
// https://go.demo.pardot.com/l/0/0000-00-00/00

window.addEventListener('gcdcGateSubmitted', function(event) {
  // Capture the viewer’s email from the submitted form
  var emailInput = document.querySelector('.gcdc-modal-wrapper input[type="email"], input[type="email"]');
  var email = (emailInput && emailInput.value) ? emailInput.value : "";

  // Notify Walnut when the gated form is submitted
  setTimeout(function() {
    window.parent.postMessage(
      {"walnut-embedded-form-submitted": {"email": email}},
      window.location.href
    );
  }, 1000);
});
</script>

/* ---------------------------------------------------------------------------
   STEP 3b: Add your Gate ID below. Replace the Xs with your unique Gate ID 👇
   --------------------------------------------------------------------------- */  

<div class="gate-XXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"></div>

<script>
   (function (g, a, t, e, d, c, o) {
     if (!g[d]) {
     g.GatedContentObject = d;
     g[d] = g[d] || function () { (g[d].q = g[d].q || []).push(arguments) };
     c = a.createElement(t), o = a.getElementsByTagName(t)[0];
     c.async = 1; c.src = e; o.parentNode.insertBefore(c, o)
   }
})(window, document, 'script', 'https://app.gatedcontent.com/scripts/00000000/app.js', 'gcdc');
gcdc('loadGates');
</script>

<div class='gate-00000000-0000-0000-0000-00000000d000'></div>`      

Step 3: Insert Your Unique GatedContent Code into the Starter Script

1. Copy the code between your <script> and </script> tags in your unique GatedContent snippet. (*Do not include the <script> tags themselves.)
2. Paste that portion into the STEP 3a section of the starter script in your Walnut template.
   
   Paste your code below the line that says:
   // ↓↓↓ Paste your GatedContent script below this line ↓↓↓
3. Copy your Gate ID (for example, gate-00a0dc0c-00de-000f-afc0-0e000000d000) and replace the placeholder Gate ID in the final <div> line of the starter script.
   
   This section is labeled STEP 3b: “Add your Gate ID below. Replace the Xs with your unique Gate ID 👇”.
4. That's it! Finish configuring your form in the Forms panel — adjusting options such as settings, placement, and autoclose behavior as needed for your demo.

5. Once configured, save your changes and publish a demo to test your form.

Step 4: Test Your Form Setup

Once your script and Gate ID are in place, you’re ready to test your form submissions.

1. Publish a demo containing the form.
2. Open the published demo in an incognito or private window and submit a test entry through your GatedContent form.
3. Verify that the form submission is successful and check Walnut → Insights → Demo → Sessions of this demo to confirm that the email submission is captured.