Slideover Form Embed

WAIT… 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 slideover form.

<!-- Start Surface Form Embed -->

<script>
  (function() {
    const surface_src = "REPLACE ME WITH FORM URL"
    const surface_embed_type = "slideover"
    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 REPLACE ME WITH FORM URL 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>

Direct Link

Append showSurfaceForm=true to the url of your website. For example:

https://YOUR_WEBSITE.com/?showSurfaceForm=true

Replace YOUR_WEBSITE.com with your actual website URL.

This will automatically trigger the slideover form to appear when the page loads, without requiring the user to click a trigger button.

Optimize Speed

Add the following <link> tags inside the <head> of your site:

<!-- Speed up connections to forms.withsurface.com by performing early DNS resolution and TCP handshake -->
<link rel="dns-prefetch" href="https://forms.withsurface.com">
<link rel="preconnect" href="https://forms.withsurface.com" crossorigin>

<!--  Fetch the form in advance, so it's ready when a user opens it. -->
<link rel="prefetch" href="REPLACE ME WITH FORM URL" as="document">

Replace REPLACE ME WITH FORM URL with a Surface Form URL.

Explanation

dns-prefetch → Resolves the domain early to skip DNS lookup delays.
preconnect → Prepares the TCP + TLS handshake so the browser is ready to request assets immediately.
prefetch → Fetches the form in advance, so it’s ready when a user opens it.

Surface Tag

Form Embedding

API Reference

MCP Server

Events

External Forms

Workflows

Website Visitor De-Anonymization

Tracking

Platform

Edit Head Tag

Choose trigger buttons

Direct Link

Optimize Speed

Explanation

​Edit Head Tag

​Choose trigger buttons

​Direct Link

​Optimize Speed

​Explanation

Edit Head Tag

Choose trigger buttons

Direct Link

Optimize Speed

Explanation