Carrd Waitlist: Add Email Signup With One HTML Embed

Carrd is the fastest no-code landing page builder for indie founders. You can ship a one-pager in an afternoon with no coding required. But adding a waitlist to Carrd requires knowing one platform quirk: each custom HTML block renders inside its own iframe, which changes how you embed external scripts.

Get this right and you have a working waitlist with referral tracking in under five minutes.

What You Need Before You Start

• Carrd Pro Standard ($19/year). The free plan does not allow custom HTML embeds. Pro Standard is the minimum plan that unlocks the HTML/CSS/JS element type in the editor.
• An OperatorStack account. Free to start. You need your project key (the pk_ value from your embed snippet).

Step-by-Step Setup

<script src="https://operatorstack.dev/os.js" data-project="pk_abc123"></script>

<script src="https://operatorstack.dev/os.js" data-project="pk_abc123"></script>
<div data-os-widget="waitlist"></div>

When the Form Renders but the Dashboard Stays Empty

This is the failure the iframe produces, and it does not throw an error. The form paints, the submit button works, and Contacts stays at zero. Two commands tell you which half broke.

os.js resolves both of its inputs against document. The project key comes from document.querySelector("script[data-project]") and the widget containers come from document.querySelectorAll("[data-os-widget]"). Inside a Carrd HTML element, document is the iframe's document, not the page's. Same element means same document, so both queries hit. Split across two elements means the script's document holds no widget div and the div's document holds no script tag, and neither half reports a problem.

First, turn on logging by adding data-dev="true" to the script tag:

<script src="https://operatorstack.dev/os.js" data-project="pk_abc123" data-dev="true"></script>
<div data-os-widget="waitlist"></div>

Every [OperatorStack] line now prints to the console, and the 5-minute config cache is bypassed so dashboard changes show up on reload instead of five minutes later. If you mistyped the attribute name, you get this warning even without data-dev, because it is a console.warn rather than a debug log:

[OperatorStack] No data-project attribute found on script tag

Second, point the console at the right frame. In Chrome DevTools the console has a context dropdown next to the filter box, and it reads top by default. top is the Carrd page, not your embed. Switch it to the iframe entry, then run:

await window.OperatorStack.ready;
window.OperatorStack.projectKey; // "pk_abc123"
window.OperatorStack.isSignedUp(); // true after a test signup

window.OperatorStack being undefined on top while defined in the iframe is the expected result for the Step 5 approach, not a bug. If it is undefined in both, the script tag never loaded. If projectKey is null, the script loaded but the key did not come through, which almost always means the script tag and the div ended up in different Carrd elements.

What Your Visitors See

After someone submits the waitlist form, OperatorStack shows a confirmation message and displays their unique referral link. Share buttons for Twitter, LinkedIn, WhatsApp, and email appear automatically. When a referred visitor signs up through that link, the attribution is recorded and visible on your referral leaderboard.

The embed also collects cookie-free analytics in the background: total page views, referral sources (which sites send you traffic), and estimated unique visitors. No extra configuration, no cookie banner required.

Alternative: Header Code Injection

If you are on Carrd Pro Plus, you can also add the script tag via Site Settings > Code Injection > Header instead of embedding it in an HTML element. This loads the script in the main page context rather than inside an iframe.

With this approach, add a separate HTML element to your page containing only:

<div data-os-widget="waitlist"></div>

A header-injected script runs in the page's main document, so it renders only the widget divs that live in that same document. If Carrd puts your div inside an iframe, the header script will not see it. Run the frame check above before you rely on this route. The single-element approach from Step 5 keeps the script and the div in the same document by construction and works on all paid Carrd plans, so use that unless you have a specific reason to separate them.