Start here · Mail
Set up your first list and welcome sequence — entirely through Iris.
You just made a Loopi account. By the end of this page you'll have a signup form embedded on your website, a 2-email welcome sequence drafted and previewed (welcome instantly, follow-up tomorrow), and the form wired to the sequence so every new subscriber gets welcomed automatically. Three prompts to Iris. About an afternoon.
In this tutorial. A live signup loop — someone hits Subscribe on your site, lands in your Loopi list, and a welcome email shows up in their inbox seconds later. Below is exactly what that loop looks like once it's wired up.
The play
Open your Agents tab and run three prompts with Iris. By the third one your site is live-capturing emails and every new signup gets a welcome email instantly and a follow-up the next morning.
Open your Agents tab
Talk to Iris — no setup required
Create list + form
Iris hands you a paste-ready snippet
Draft + preview welcome
Welcome instantly, follow-up next day
Wire form → sequence
Every signup auto-enrolled
Talk to Iris
Everything below happens in the Loopi app itself — no separate tool to install, nothing to connect. Open the Agents tab, and Iris is there, waiting to hear what you're setting up. Type (or paste) the three prompts below, one at a time, and she does the rest.
New here? Create your Loopi account first →
What Loopi handles for you
You'll never touch any of this. It happens because Iris runs it for you.
- Hosted form rendering. Your snippet is one line. The form HTML, validation, theme switching, and successful-submit screen are served from Loopi.
- Email delivery, done. By default your subscribers receive mail from
noreply@mail.loopi.social— an address Loopi has already set up to land in inboxes, not spam folders. You don't manage any of the behind-the-scenes plumbing. Own a domain likeyoursite.com? You can send asmail@yoursite.cominstead — see send email from your own domain. - Unsubscribe compliance. List-Unsubscribe headers and the inline unsubscribe link are injected on every send. You write the body; Loopi adds the legal plumbing.
- Click tracking and analytics. Every link in every email is wrapped for attribution, and per-step analytics roll up on the sequence detail page automatically.
Step 1 — Create your list and signup form
The list is the bucket. The form is the door. You'll set both up in one prompt to Iris.
You provide
You get back
List name + form copy
Headline, CTA, success message
Theme + accent color
Match your site — dark/light + one hex
Iris
Your Loopi agent, in the Agents tab
List created
Your subscribers land here
Form created
Hosted on embed.loopi.social
Embed snippet
Two-line snippet to paste
Iris creates the list, builds the form for it, then hands you back the embed snippet in the chat. It looks like this:
Don't copy this one. The placeholder above (mfrm_REPLACE_WITH_YOUR_FORM_ID) doesn't exist — use the snippet Iris returns in your chat. The real one carries your form id and the form's config (labels, fields, success message) baked into a data-config attribute, so it renders instantly without an extra fetch.
Drop the snippet into your site
Wherever you want the form to appear, paste both lines — the <script> loader and the <loopi-form> tag — into your page. The loader registers the custom element; the tag renders the form. A few common spots:
- Hand-written HTML / static site: paste both lines inside the
<body>wherever you want the form to render. - Webflow / Framer / Squarespace: add an "Embed" or "Custom HTML" block and paste both lines in. Save, publish, refresh — the form is live.
- WordPress: use a "Custom HTML" block (block editor) or paste into a text widget (classic editor).
- Next.js / React / Vite / Vue / Svelte / Astro: paste both lines directly into your component.
<loopi-form>is a Web Component, so every modern framework supports it natively — no wrapper or library needed.
Reload your site. The form should render where you pasted it. Submit your own email as a test — you should land in your Loopi list within a few seconds.
Style it to match your site
The form renders in your page's own DOM — no iframe, no shadow DOM — so your site's stylesheet styles it directly. The embed ships intentionally minimal; you target the .loopi-* classes and your fonts, spacing, and colors win. Here it is themed for a dark site with an indigo button:
The classes are stable: .loopi-form wraps the form, .loopi-email is the input, .loopi-submit is the button, and .loopi-msg is the confirmation line (it carries [data-ok] on success and [data-err] on error). Drop these into the same stylesheet that styles the rest of your page and the form blends right in.
Don't want to write the CSS by hand? If your site's code lives with an AI coding assistant already, hand it the snippet — "add this Loopi form to my page and style it to match my site" — and because it's a plain Web Component living in your own DOM, it can place and theme it using your existing styles.
Don't have a Loopi account yet? Create one here →
Step 2 — Draft and preview the welcome sequence
Two emails. The first is the welcome — categorized that way on the sequence, fires the instant someone subscribes, ignores send-hour and timezone rules. The second is a regular drip step — one day later, in the list's morning slot. Together they introduce you, give one piece of value, and route the reader to whatever you most want them to do next.
You provide
You get back
Your voice + product
How you talk; what you'd like them to try
Welcome + follow-up briefs
What each email should accomplish
Iris
Your Loopi agent, in the Agents tab
Two emails drafted
HTML + plain-text bodies for both
Previews in your inbox
One test send per email — only to you
Sequence live
Instant welcome + 1 follow-up drip, activated
Behind the scenes Iris drafts both emails, sends a test of each one to your inbox so you can read it before any real subscriber does, then creates the sequence with the welcome email set as the instant welcome and the follow-up as a one-day-later drip step. Once activated, it's live. Open your inbox, read both previews, ask Iris to revise either one if it doesn't sound like you.
The welcome email is the transactional confirmation a new subscriber expects to see seconds after they hit Subscribe — Loopi treats it as the sequence's instant welcome and ignores the usual send-hour and timezone rules for that one message. The follow-up arrives the next morning in the list's default morning slot (6 AM in the list's timezone, unless you tell Iris to pick a different time).
Step 3 — Wire the form to the sequence
Right now your form drops new emails into the list, but nothing triggers the sequence. One more prompt to Iris attaches the sequence to the form so every signup is auto-enrolled.
Iris links the form to the sequence. Done. Every new submission from this point forward auto-enrolls the subscriber, who gets the welcome email within seconds and the follow-up the next morning.
Test the whole loop end-to-end
Open your site, submit a real email you control that isn't your Loopi account email (a personal Gmail, an alias, anything else). You'll see the success message and the welcome email should land within seconds. Tomorrow morning, the follow-up arrives.
While you wait, the Loopi app shows the live state — the Subscribers tab logs the new signup, the Sequences tab shows the enrollment, and the Schedule tab lists the queued send.
Next play — make sure your welcome lands in Gmail Primary →
Ship your first list before you close the tab.
Open your Agents tab, run the three prompts above with Iris, and your site captures its first real subscriber tonight.
Get started with Loopi →