Embedding a Form

Quick Start

Get a collection form on your page in under 5 minutes.

<div data-saywall-collect="YOUR_FORM_ID"></div>
<script src="https://saywall.io/collect-embed.min.js" async></script>

Display Modes

Pro feature: Inline, popup, and floating embed modes require a Pro plan. The public form page is available on all plans.

SayWall collection forms support three display modes. You choose the mode in the Share tab of the form editor — the embed snippet is generated automatically to match your settings.

Inline Mode

The default. The form renders in the exact position of the <div>.

<div data-saywall-collect="YOUR_FORM_ID"></div>
<script src="https://saywall.io/collect-embed.min.js" async></script>

Popup Mode

The <div> can be placed anywhere — it is invisible. The form opens as a modal overlay based on your trigger settings.

<div
  data-saywall-collect="YOUR_FORM_ID"
  data-mode="popup"
  data-trigger="button"
  data-trigger-text="Leave a Review"
  data-trigger-position="bottom-right"
  data-trigger-color="#4f46e5"
  data-trigger-text-color="#ffffff"
  data-popup-size="md"
></div>
<script src="https://saywall.io/collect-embed.min.js" async></script>

Floating Mode

The form appears as a floating card anchored to a corner of the viewport.

<div
  data-saywall-collect="YOUR_FORM_ID"
  data-mode="slidein"
  data-trigger="button"
  data-trigger-text="Leave a Review"
  data-trigger-position="bottom-right"
  data-slidein-position="bottom-right"
></div>
<script src="https://saywall.io/collect-embed.min.js" async></script>

HTML vs React/Next.js

<!-- Place the div where you want the form (inline) or anywhere (popup/floating) -->
<div data-saywall-collect="YOUR_FORM_ID"></div>
 
<!-- Place the script once per page, before </body> -->
<script src="https://saywall.io/collect-embed.min.js" async></script>

Trigger Types

Popup and floating forms fire based on a trigger. You configure the trigger in the dashboard — the attribute is included in the generated embed code automatically.

Data Attributes Reference

Core attributes

Trigger attributes (popup and floating modes)

Popup-specific attributes

Floating-specific attributes

JS API

For popup and floating forms you can open and close the form from your own JavaScript — useful when you want to trigger collection after a user action (e.g., completing a purchase).

// Open the form
SayWall.open("YOUR_FORM_ID", { mode: "popup" });
 
// Close the form
SayWall.close("YOUR_FORM_ID");

SayWall.open() accepts an optional options object:

How It Works

The embed script uses Shadow DOM to render the form in isolation from your page.

When collect-embed.min.js initialises:

1. It scans the page for any data-saywall-collect elements (including ones added dynamically after load)
2. For inline mode it fetches and renders the form immediately in place
3. For popup / floating mode it sets up the configured trigger, then fetches the form when it's about to open
4. It attaches a shadow root to the host element and injects the form styles and HTML inside it

The shadow root completely isolates the form's styles from your page — no CSS conflicts in either direction.

CSP Requirements

script-src 'self' https://saywall.io 'unsafe-eval';

script-src 'self' https://saywall.io https://www.google.com/recaptcha/ https://www.gstatic.com/ 'unsafe-eval';

Direct Form Link

Every collection form also has a standalone URL:

https://saywall.io/t/YOUR_PROJECT_SLUG/YOUR_FORM_SLUG

You can share this link directly in emails, QR codes, or social posts — no embed required. The link is shown in the Share tab of the form editor alongside the embed code.