# Slideover









### 1. Create Surface Constructor [#1-create-surface-constructor]

<Frame>
    <img alt="Unbounce JavaScript Settings" src="__img0" />
</Frame>

1. In the bottom toolbar, click the "JavaScript" button
2. Click "Add New JavaScript"
3. Add the following script:

```html
<!-- 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 -->
```

1. Make sure to replace the &#x2A;*`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:

<Frame>
    <img alt="Unbounce Script Configuration" src="__img1" />
</Frame>

### 2. Configure Form Trigger Button [#2-configure-form-trigger-button]

<Frame>
    <img alt="Unbounce Button Configuration" src="__img2" />
</Frame>

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 &#x2A;*`surface-form-button`**