# Slideover



Add the following code to the &#x2A;*`pages/_document.tsx`** file:

```tsx
import Document, { Html, Head, Main, NextScript } from "next/document";
import Script from "next/script";

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          <Script
            id="surface-tag"
            src="https://cdn.jsdelivr.net/gh/trysurface/scripts@latest/surface_tag.min.js"
            data-site-id="SITE_ID" // Replace this with your Site ID
            strategy="beforeInteractive"
          />
          <Script
            id="surface-form-script"
            strategy="afterInteractive"
            dangerouslySetInnerHTML={{
              __html: `
                (function () {
                  const surface_src = "<your_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)
                })();
              `,
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
```

<Note>
  You must replace the &#x2A;*`<your_form_url>`** with the form URL from the Surface Form Builder.
</Note>

Add the `surface-form-button` className to the element you want to use to trigger the form.

```tsx
export default function Home() {
    return (
        <div>
            <button className="surface-form-button">Open Form</button>
        </div>
    );
}
```
