# Embed a form on your website

> Add the form inside a page, make it fill the browser, or open it from a button. Copy the generated snippet from Share and paste it into your site.

Canonical: https://reuily.com/help/sharing/embed

## Copy your embed code

1. **Open Share:** Publish your form, then select Share in the form builder.
2. **Choose Embed:** Select Inline, Full page, or Popup.
3. **Copy the code:** Set the available size options, then select Copy.
4. **Add it to your site:** Paste the snippet into an HTML or custom-code area and publish the page.

The examples below use a sample URL. For a live form, copy the snippet from Share so the URL, title, dimensions, and selected mode are exact.

## Understand the snippet

Each snippet contains one target element and the Reuily loader script. Keep both parts.

- `data-reuily-url`: Required. The published form URL copied from the Share modal.
- `data-reuily-title`: Required. The accessible title applied to the embedded iframe or popup dialog.
- `data-reuily-form`: Marks a div as an inline or full-page embed container.
- `data-reuily-mode`: Set to full-page for a viewport embed. Omit it for Inline.
- `data-reuily-width`: Inline only. Sets the maximum container width in pixels.
- `data-reuily-height`: Inline only. Sets the container height in pixels.
- `data-reuily-popup`: Marks a button as a popup trigger.
- `embed.js`: Required. Mounts iframe containers, opens popup dialogs, and detects Reuily embeds added later.

## Inline embed

Use Inline to place the form inside an existing page. Set its maximum width and height in Share before copying the code.

```html
<div
  data-reuily-form
  data-reuily-url="https://reuily.com/@your-workspace/contact"
  data-reuily-title="Contact form"
  data-reuily-width="720"
  data-reuily-height="640"
></div>
<script async src="https://reuily.com/embed.js"></script>
```

- Place the snippet where the form should appear in the page layout.
- The container uses 100% of the available width up to data-reuily-width.
- The container height comes from data-reuily-height.
- Keep the script tag so Reuily can create the iframe.

## Full-page embed

Use Full page on a dedicated URL. The loader fixes the form to the full browser viewport.

```html
<div
  data-reuily-form
  data-reuily-mode="full-page"
  data-reuily-url="https://reuily.com/@your-workspace/contact"
  data-reuily-title="Contact form"
></div>
<script async src="https://reuily.com/embed.js"></script>
```

Use this on a dedicated page without another header, navigation bar, or content that visitors need to access while completing the form.

## Popup button

Use Popup to open the form from a button without leaving the current page. The dialog fills the screen on mobile.

```html
<button
  type="button"
  class="reuily-popup-button"
  data-reuily-popup
  data-reuily-url="https://reuily.com/@your-workspace/contact"
  data-reuily-title="Contact form"
>
  Open contact form
</button>
<script async src="https://reuily.com/embed.js"></script>
```

- Edit the visible button text directly in the snippet.
- Style reuily-popup-button in your site CSS to change the launcher.
- Visitors can close the popup with its close control, the Escape key, or the backdrop.
- The close control uses the form colors and button shape set in Style.

## React and Next.js

Render the same data attributes in JSX. Load embed.js after the page becomes interactive.

```tsx
import Script from "next/script";

export default function ContactForm() {
  return (
    <>
      <div
        data-reuily-form=""
        data-reuily-url="https://reuily.com/@your-workspace/contact"
        data-reuily-title="Contact form"
        data-reuily-width="720"
        data-reuily-height="640"
      />
      <Script src="https://reuily.com/embed.js" strategy="afterInteractive" />
    </>
  );
}
```

In another React framework, load the script once from your application shell. Render the configured div wherever the form should appear.

## Website builders

Add an Embed, Custom HTML, or Code block. Paste the complete generated snippet without changing its data attributes.

- **Webflow and Framer:** Add an Embed or Code component. Paste the snippet, publish the site, then test the form.
- **WordPress:** Use a Custom HTML block. Confirm that your WordPress plan and security plugins allow script tags.
- **Shopify:** Add the snippet to a Custom Liquid section or the theme template where the form should appear.
- **Other builders:** Use the custom-code element. If the builder removes script tags, check its plan and security settings.

## See where people come from

Every response saves where people came from. An embedded form picks this up from your page's link on its own. When someone reaches your page from an ad, a tracked link or a referral link, the form saves where they came from, the post or campaign, who referred them and the ad click with their response. To pass along something else from your page's link, like a partner code, list it in `data-reuily-params` and add it under Share, Tracking, then "Track something else". To give every response from this embed a fixed value, use `data-reuily-hidden`.

```html
<div
  data-reuily-form
  data-reuily-url="https://reuily.com/@your-workspace/contact"
  data-reuily-params="partner"
  data-reuily-hidden="page=pricing"
></div>
<script async src="https://reuily.com/embed.js"></script>
```

People filling in the form never see these details. You can turn this off for a form in Share, then Tracking.

## Troubleshooting

- Confirm the form is published and its public link opens normally.
- Use HTTPS on the published website and keep the embed.js script URL unchanged.
- Check whether your builder or Content Security Policy is blocking external scripts or frames.
- Remove duplicate custom CSS that changes the embed container or iframe dimensions.
- Publish or deploy the host page before testing. Some builders do not run scripts in editor previews.
- Open the browser console and check for blocked-script, frame, or network errors.

You may keep one Reuily script tag on a page with more than one form. The loader detects every Reuily embed container and popup button, including elements added later.