Unbounce Integration Guide

This guide will show you how to embed your LeadCapture.io form directly into an Unbounce landing page, set up a click-triggered form pop-up, and maximize the form's loading speed. Watch the video below for a full walk through.

Step 1: Preparing Your LeadCapture.io Form

Before embedding the form in Unbounce, ensure that:

  • Your form is fully set up with all steps connected.
  • An entry step is set.
  • The form mode is set to either Embed or All in the settings.

Step 2: Embedding the Form in Unbounce

  1. Go to Unbounce and navigate to the section where you want to add the form.
  2. Add a Custom HTML Block to the page.
  3. Copy the Pixel Script from the LeadCapture.io Publish section:
    • This script enables the form to communicate with the LeadCapture.io system.
    • Each form has a unique token. If you regenerate the code, you'll need to replace the existing code in Unbounce with the updated script.
  4. Paste the Pixel Script into the HTML block in Unbounce.
    • You can also add this script to the page's header section using Unbounce's JavaScript manager.
  5. Go back to LeadCapture.io and copy the Embed Code from Step 2 in the Publish section (div ID or div class).
  6. Paste the Embed Code under the Pixel Script in the HTML block.
  7. Adjust the size of the HTML block to fit the form's container.
  8. Ensure the code is added for both desktop and mobile views.
  9. Save and Republish the Unbounce page.

Now your form should appear directly on the page.

Maximizing Form Loading Speed

To speed up form loading, you can use the Raw Code option:

  1. Go to the LeadCapture.io Publish section and expand the Advanced Options.
  2. Click Generate Raw Code. This code includes all form attributes for faster loading.
  3. Copy the Raw Code and paste it below the embed code in Unbounce.
  4. Save, Republish, and refresh the page to see the form load nearly instantly.

Note: If you update the form (e.g., change text or colors), you’ll need to regenerate and re-add the raw code to the Unbounce page.

Setting Up a Click-Triggered Pop-Up

  1. In LeadCapture.io, go to Form Mode and set it to All (to allow both embedded forms and pop-ups).
  2. Go to Publish > Step 2 > Behavior Options and select Trigger with Button Click.
  3. Copy the trigger class (e.g., leadforms-trigger-el ).
  4. In Unbounce, add a button to the page and paste the trigger class into the Custom Class field.
  5. Set the button's URL to a hash symbol (# ).
  6. Save, Republish, and refresh the page to ensure the form pops up when the button is clicked.

Step 5: Configuring Exit Intent or Timed Pop-Ups

To set up a timed pop-up or exit intent:

  1. Go to LeadCapture.io Settings.
  2. In the Pop-Up Behavior section, select either Timed Pop-Up or Exit Intent.
    • For a timed pop-up, set the delay and frequency.
    • For exit intent, the form will pop up when the user tries to leave the page or clicks the back button on mobile.
  3. Enable Onsite Messaging to show a message in the bottom corner of the page, boosting engagement and conversions.

Final Tips

  • To apply forms or pop-ups across multiple pages, use a site-wide script insertion method, such as a header script.
  • You can adjust the onsite messaging and pop-up settings to match the content of each page for higher engagement.

Need Help?

If you encounter any issues or need assistance, contact us at support@leadcapture.io.

Still need help? Contact Us Contact Us