Skip to main content
WAIT… Make sure that you have added the Surface Tag to your site before proceeding.

​
Edit Surface Form Embedding Script

Let’s edit the Surface Form Embedding Script to display the form as a widget. 
<!-- Start Surface Form Embed -->
<script>
  (function() {
    const surface_src = "surface_form_url";
    const surface_embed_type = "widget"; // switch to "widget" to display the form as a widget
    const target_element_class = "surface-form-button";
    const c = new SurfaceEmbed(
        surface_src,
        surface_embed_type,
        target_element_class,
        {
            widgetStyles: {
                position: "right",
                bottomMargin: "40px",
                sideMargin: "30px",
                size: "64px",
                backgroundColor: "#1a56db",
                hoverScale: "1.05",
                boxShadow: "0 6px 12px rgba(0,0,0,0.25)"
            }, // customize the widget appearance
        }
    );

    c.popupSize = "small";
  })();
</script>
<!-- End of Surface Form Embed -->

​
Customize Widget Appearance

You can customize the appearance of the widget by adjusting the widgetStyles options in the SurfaceEmbed instance. 
widgetStyles: {

    position: "right", // position of the widget (right, left)

    bottomMargin: "40px", // margin from the bottom of the page (in px)
    
    sideMargin: "30px", // margin from the side of the page (in px)
    
    size: "64px", // size of the widget (in px)
    
    backgroundColor: "#1a56db", // background color of the widget (in hex)
    
    hoverScale: "1.05", // scale of the widget when hovered (in decimal)
    
    boxShadow: "0 6px 12px rgba(0,0,0,0.25)" // shadow of the widget (in hex)

}

​
Control Popup Size

When the widget is clicked, it triggers a popup. You can control the size of this popup using the popupSize variable on the SurfaceEmbed instance. Current accepted values are small, medium, and large. 
c.popupSize = "small";

​
Use it with Popup Embedding

The widget inherits the popup embedding type only, Hence, we can still use the popup embedding type by adding surface-form-button class to any HTML element to trigger the popup.