Slideover

1. Create Surface Constructor

In the bottom toolbar, click the "JavaScript" button
Click "Add New JavaScript"
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 = "slideover";
        const surface_target_element_class = "surface-form-button";

        const cSurfaceForm = new SurfaceEmbed(surface_src, surface_embed_type, surface_target_element_class);
    }

    // Run initializeSurfaceForm only when user interacts
    document.addEventListener("click", initializeSurfaceForm, { once: true });
    document.addEventListener("scroll", initializeSurfaceForm, { once: true });
</script>
<!-- End Surface Form Embed -->

Make sure to replace the REPLACE ME WITH FORM URL with your Surface form URL
Set the script placement to "Before the body Tag"
Click "Done" to save the changes

This is what your script should look like:

2. Configure Form Trigger Button

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

1. Create Surface Constructor

2. Configure Form Trigger Button

On this page