Skip to content
Help Center

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.

View as Markdown

Copy your embed code

  1. Step 1

    Open Share

    Publish your form, then select Share in the form builder.

  2. Step 2

    Choose Embed

    Select Inline, Full page, or Popup.

  3. Step 3

    Copy the code

    Set the available size options, then select Copy.

  4. Step 4

    Add it to your site

    Paste the snippet into an HTML or custom-code area and publish the page.

Use the generated snippet

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.

Inline HTML

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.

Full-page HTML

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.

React and Next.js

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

Next.js component

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.

Inline HTML with tracking

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

Check these items if the form does not appear or differs from the Share preview.

  • 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.

Embedding more than one form

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