# Widget Form Embed
**WAIT...** Make sure that you have added the [**Surface Tag**](/platform/traffic/surface-tag) to your site before proceeding.
## Edit Surface Form Embedding Script [#edit-surface-form-embedding-script]
Edit the Surface Form embedding script to display the form as a widget:
```html
```
## Customize Widget Appearance [#customize-widget-appearance]
Adjust the `widgetStyles` options on the `SurfaceEmbed` instance:
```javascript
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 [#control-popup-size]
Clicking the widget opens a popup. Set `popupSize` on the `SurfaceEmbed`
instance to `small`, `medium` or `large`.
```javascript
c.popupSize = "small";
```
## Use It with Popup Embedding [#use-it-with-popup-embedding]
The widget only inherits the popup embedding type, so you can still add the
`surface-form-button` class to any HTML element to trigger the popup.
## Where to Paste It [#where-to-paste-it]
The widget renders its own button, so no trigger class is needed. The class
instructions in the tabs below only apply if you also want a second, in-page
trigger.
Webflow [dashboard](https://webflow.com/dashboard) → **Project Settings** →
**Custom Code**, and paste it into the **Footer Code** section. Publish the
site for it to take effect.
Then give the trigger element the class: select the button in Designer, open
the **Style** panel, and add `surface-form-button` to the Style Selector.
Framer → project **Settings** → **Custom Code** → **End of `` tag**.
Framer has no class field, so the trigger needs a code override. In the
element's **Code Overrides**, create a file called `SurfaceFormButton` and
add:
```tsx
export function withClass(Component): ComponentType {
return (props) => {
props.className += " surface-form-button" // keep the leading space
return
}
}
```
Then select `SurfaceFormButton` → `withClass` on the element.
Custom code is a paid Framer feature.
Use a header/footer plugin. [WPCode](https://wordpress.org/plugins/insert-headers-and-footers/)
is the usual choice. **Code Snippets → Header & Footer**, paste into the
**Footer** box, save.
Add `surface-form-button` to the trigger element's CSS classes in the block
editor's **Advanced** panel.
In `app/layout.tsx` (App Router) or `pages/_document.tsx` (Pages Router),
using `next/script` with `strategy="afterInteractive"`:
```tsx
import Script from "next/script";
```
Then ``.
In `public/index.html`, at the end of ``.
Then `` anywhere in
your tree. The embed script binds by class, so it works with elements React
renders later.
In the page editor's bottom toolbar → **JavaScript** → **Add New JavaScript**,
with placement **"Before the body Tag"**.
Unbounce loads scripts unpredictably, so guard the constructor and run it on
first interaction:
```html
```
Anywhere before ``, on every page that has a trigger element. Give
that element `class="surface-form-button"`.