⚡ Quick Start Guide

Add the widget to
any website

Copy one snippet. Paste it before </body>. You're done. No build step, no npm, no configuration.

Step 1 — Copy this
HTML 
<!-- Paste this right before </body> -->
<div id="spynra-widget"
     data-project-id="YOUR_PROJECT_ID">
</div>
<script src="https://spynra.com/widget.js"></script>
1
div id="spynra-widget" — tells the script where to draw the widget. You can put this anywhere on the page.
2
data-project-id — your unique project ID (find it in Settings → Widget). Replace YOUR_PROJECT_ID with your actual ID.
3
script src="..." — loads the widget code from Spynra. Runs once, stays fast.
⚠️
Replace YOUR_PROJECT_ID with your real project ID from your dashboard. Without it, the widget won't know which waitlist to send signups to.
What it looks like when embedded
  • 📧 Email input with validation
  • 🚀 Referral link after signup
  • 📊 Waitlist position tracking
💡
Where to paste: Put the code immediately before the closing </body> tag on any page where you want the widget to appear.
Step 2 — Find your Project ID
  1. Log in to your dashboard
  2. Open the project you want to embed
  3. Go to Settings → Widget
  4. Copy the Embed Key — it goes in data-project-id
Step 3 — Customize it

Most users want one of these

Three things most people change right away — paste one attribute and you're done.

I want a different look → Change the theme

Pick a theme below, then add ?theme=dark (or light / brand) to the script URL in your snippet.

Choose the theme that fits your site:

Dark ?theme=dark

Best for dark-background websites, tech/SaaS landing pages, or sites with a premium dark aesthetic. Dark background card with subtle shadow. Light text and icons for contrast. Works well on dark nav bars, footer sections, or full dark-mode sites.

✓
Light ?theme=light

Best for light-background business sites, blogs, or pages with a clean minimalist look. White/light card with soft shadow. Dark text and icons for contrast. Works well on content-heavy pages, above-the-fold sections, or white-background sites.

✓
Brand ?theme=brand

Best when you want the widget to feel native to your brand colors. Transparent/adaptive background that blends with your site. Your brand's primary color drives the CTA button. Recommended for branded landing pages, product pages, or anywhere you want visual consistency.

✓
💡
Theme Selection Tip: The best theme is the one that blends with your existing site design. Preview all three in your browser before publishing. You can switch themes at any time without losing your waitlist data.
HTML 
<!-- Dark theme (default) — no change needed -->
<div id="spynra-widget" data-project-id="YOUR_ID"></div>
<script src="https://spynra.com/widget.js?theme=dark"></script>

<!-- Light theme -->
<script src="https://spynra.com/widget.js?theme=light"></script>

<!-- Brand theme (indigo, inherits your bg color) -->
<script src="https://spynra.com/widget.js?theme=brand"></script>

I want a different button label → Change the CTA text

Add data-cta-text to your div. The button changes, nothing else.

<div id="spynra-widget"
     data-project-id="YOUR_ID"
     data-cta-text="Get Early Access">
</div>
<script src="https://spynra.com/widget.js"></script>

I want to collect names → Add the name field

Add data-require-name to make the name field appear right after email. Visitors will see "← Add your name" as a link — clicking it shows the name field. If you want it mandatory, enable it in your project Settings → Widget.

<div id="spynra-widget"
     data-project-id="YOUR_ID"
     data-require-name="true">
</div>
<script src="https://spynra.com/widget.js"></script>
Step 4 — Paste it on your site

Works with every website builder

Doesn't matter what tool you use — just find where you can add custom HTML and paste the snippet.

Webflow
WordPress
Squarespace
Custom HTML
Framer

Use the Custom Code section in Project Settings, or an Embed element on a specific page.

  1. Go to Project Settings → Custom Code
  2. Paste the snippet into the Footer Code section
  3. Click Save Changes and publish

To embed only on one page: drag an Embed element to that page, paste the snippet, and publish.

The easiest method is a plugin like Insert Headers and Footers, or your theme's customizer.

  1. Install the Insert Headers and Footers plugin (free)
  2. Go to Settings → Insert Headers and Footers
  3. Paste the snippet into the Scripts in Footer box
  4. Save

For a specific page: add a Custom HTML block to the page, paste the snippet.

Use Code Injection in your site settings. Requires a Business plan or higher.

  1. Go to Settings → Advanced → Code Injection
  2. Paste the snippet into the Footer section
  3. Save

For one page only: open page settings → Advanced → paste into Page Header Code Injection.

Find the closing </body> tag and paste the snippet just before it.

<!-- Your page content -->

<!-- Spynra waitlist widget -->
<div id="spynra-widget" data-project-id="YOUR_ID"></div>
<script src="https://spynra.com/widget.js"></script>

</body>
</html>

Framer supports custom code via an Embed component.

  1. Add an Embed component to your page where you want the widget
  2. Paste the full snippet (both the div and the script) into the embed
  3. Adjust the embed's width and sizing as needed

You can also use Framer's Custom Code section in project settings to add it site-wide.

Advanced

Full embed snippet with all options

All available attributes you can add to the widget div. Only use what you need.

HTML — All attributes 
<!-- Paste before </body>. Replace every YOUR_* value. -->
<div id="spynra-widget"
     data-project-id="YOUR_PROJECT_ID"   <!-- required -->
     data-theme="dark"                   <!-- dark | light | brand -->
     data-cta-text="Claim My Spot"        <!-- button label -->
     data-require-name="false"             <!-- show name step -->
></div>
<script src="https://spynra.com/widget.js"></script>
Attribute Values What it does
data-project-id Your project ID Which waitlist to send signups to. Required.
data-theme dark (default), light, brand Visual style of the widget. Dark works on any dark background; Light for light backgrounds.
data-cta-text Any text string Changes the button label. Default is "Claim My Spot".
data-require-name "true" or "false" Whether the name field is shown after email. Default false — name is optional.

Placement tips

1

Above the fold

Placing the widget where it's immediately visible (no scrolling needed) significantly improves conversion. Don't put it in the footer.

2

Dedicated landing page

A page that exists only to capture signups converts better than embedding in a full marketing page with other distractions.

3

Same project, multiple pages

One project ID works on as many pages as you want. Every signup goes to the same waitlist — no duplicate entries.

Developer Reference

API endpoints

The widget automatically calls these endpoints. You don't need to call them yourself unless you're building a custom integration.

Endpoint Returns When it's called
GET/api/widget/info Weekly signup count, CTA text, name requirement When the widget loads
GET/api/widget/stats Visitor's waitlist position, referral count After a visitor submits the form
POST/api/waitlist/add Signup confirmation When visitor submits their email
POST/api/waitlist/add-with-referral Signup + referral attribution When someone joins via a referral link
JSON — /api/widget/info response
{
  "weeklyCount": 127,          // people who joined this week (for social proof badge)
  "aheadCount": 42,           // how many are ahead of the visitor
  "ctaText": "Claim My Spot",  // custom button label, or null for default
  "nameRequired": false        // whether the name step is mandatory
}
Built-in Features

Exit-intent bar

The widget automatically shows a slide-up bar when visitors try to leave — if they scroll up toward the top of the page or move their mouse toward the browser chrome. They can dismiss it.

🔍 Scroll trigger

Fires when the visitor scrolls upward while near the top of the page — a natural signal they're leaving.

🖱️ Mouse exit

Fires when the cursor moves above the browser window — exactly when someone is about to close the tab or switch tabs.

✕ Dismissible

Visitors can close it with × and it won't reappear for the rest of their session.

Before you go live

Test it before you launch

1

Open an incognito window

Don't test in your main browser — if you've already signed up for your own waitlist, your email will be rejected as a duplicate.

2

Fill in a test email

Submit the form and check your inbox for a confirmation email. Then check your Spynra dashboard — you should see the entry within seconds.

3

Check the referral link

After signing up, you should see your position and a referral link. Copy it and open in a second browser — that should show a referral attribution in your dashboard.

4

Make sure the project is Active

If your project is in Draft mode, the widget won't render. In your dashboard, open the project and confirm it's set to Active.

⚠️
Widget not showing? Check that your project status is Active in Settings, and that the data-project-id value matches exactly what's in your dashboard.

Ready to start collecting signups?

Create your project, copy your embed snippet, and be live in 5 minutes.

Create your project → See pricing