Make sure that you have added the Surface Tag to your site before proceeding.

​
Edit Head Tag

Add the following code snippet to your site’s head tag to enable the popup form.

<!-- Start Surface Form Embed -->
<script>
window.onload = function() {
    const surface_src = "<form url here>"
    const surface_embed_type = "popup"
    const target_element_class = "surface-form-button"
    const c = new SurfaceEmbed(surface_src, surface_embed_type, target_element_class)
}
</script>
<!-- End of Surface Form Embed -->

Replace the <form url here> with the url to your surface form found by clicking the share button on the surface platform.

​
Choose trigger buttons

The next step is to choose which buttons you’d like to trigger the form.

This is done by simply adding the class name surface-form-button to the elements which should be able to make the form appear.

<button class="... surface-form-button"> </button>

​
Control Popup Size

You can control the size of the popup that appears on your site. See the following snippet:

<!-- Start Surface Form Embed -->
<script>
window.onload = function() {
        const surface_src = "<form url here>"
        const surface_embed_type = "popup"
        const target_element_class = "surface-form-button"
        const c = new SurfaceEmbed(surface_src, surface_embed_type, target_element_class)

        c.popupSize = "medium" // This value can be "small", "medium", or "large"
}
</script>
<!-- End of Surface Form Embed -->

You can set the the popupSize variable on the SurfaceEmbed instance to control the size of the popup. Current accepted values are small, medium and large