Unbounce

Popup

Embed a Surface Form popup

1. Surface Form Constructor

Unbounce JavaScript Settings

  1. In the bottom toolbar, click the "JavaScript" button
  2. Click "Add New JavaScript"
  3. Add the following script:
<!-- Start Surface Form Embed -->
<script>
    let surfaceInitialized = false;

    function initializeSurfaceForm() {
        if (surfaceInitialized || typeof SurfaceEmbed === "undefined") return;
        surfaceInitialized = true;

        const surface_src = "REPLACE ME WITH FORM URL"; // Replace with your Surface form URL
        const surface_embed_type = "popup";
        const surface_target_element_class = "surface-form-button";

        const cSurfaceForm = new SurfaceEmbed(surface_src, surface_embed_type, surface_target_element_class);
        cSurfaceForm.popupSize = "medium"; // "small", "medium", "large"
    }

    // Run initializeSurfaceForm only when user interacts
    document.addEventListener("click", initializeSurfaceForm, { once: true });
    document.addEventListener("scroll", initializeSurfaceForm, { once: true });
</script>
<!-- End Surface Form Embed -->
  1. Make sure to replace the REPLACE ME WITH FORM URL with your Surface form URL
  2. Set the script placement to "Before the body Tag"
  3. Click "Done" to save the changes

This is what your script should look like:

Unbounce Script Configuration

2. Configure Form Trigger Button

Unbounce Button Configuration

  1. Select any button on your page where you want the Surface form to appear
  2. In the sidebar, scroll to the bottom
  3. Under "Element Metadata", set the class to surface-form-button

Ready to Get Started?

See it on your own site, or open the app and build the first form.

Need Help?

Setup problems, blocked domains and CRM push failures live in the Help Center.

Feature Requests?

Tell us what is missing. We would rather hear it than guess.

On this page