React.js Slideover | Surface Docs

Create Surface Constructor

Go to the public/index.html file in your React.js project and add the following code at the end of <body> tag:

 <script>
  (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
     );
   })();
 </script>

Add className to the target element

Add surface-form-button class to the HTML element if you want to show the form as a slideover.

<button className="surface-form-button">Open Form</button>

Popup Step 3: Optimize

⌘I