Vibe code your own OptinMonster — vibecode it yourself

You can vibe code your own OptinMonster as one popup, an email field, and a lead table. OptinMonster is that product. The catalog line is “A box, a form, and a yes.”

The card lists $21 to $147 a month. OptinMonster’s monthly pricing lists Basic at $21 a month through Growth at $147 a month. Annual Basic is $210 and annual Growth is $1,470. The card leaves out Enterprise quotes. The first estimate is 4 hours. The verdict is “One popup, one list”.

Last time I wrote about vibe coding your own Mixpanel. That was a teardown. This one is a regular backlog topic. Exit intent and A/B tests stay on the skip row.

Vibe code your own OptinMonster from one campaign

The OptinMonster page splits the work into three rows.

The first row is 4 hours. A popup, an email field, and a lead table. You write the copy. Someone types an email. The table has a row.

The second row is 2 days. Page targeting, a dismiss, and a second campaign. Showing the box only on /pricing, and hiding it after a close, can wait until one campaign already stores a lead.

The third row is 1 month and up. Exit intent, A/B tests, and a template marketplace. The table labels that row as the part you should skip.

If you tell an agent to “clone OptinMonster”, it aims at the third row. Copy the prompt, then pin it to the first one.

Store Campaign, Lead, Impression, and EmbedKey. The card names all four. For these 4 hours, all four exist. The campaign is the copy and the allowed host. The embed key is the secret the snippet sends. The impression is one load of that snippet. The lead is one email on that campaign.

A campaign is a headline, a short body, an email field, thank-you copy, and one allowed host. An embed key is the current key for that campaign. An impression is a load that passed the host and key checks, with a time and no visitor id. A lead is an email, unique for that campaign.

The audience is a site owner collecting emails from one popup. The goal on the card is to show a popup with a form, store the lead, and know how many people saw it. The same v1 also stands in for Privy, Poptin, and Hello Bar. The card lists all three and does not give them prices.

A form with several questions is Typeform at $29 to $99 a month, in Vibe code your own Typeform. A waitlist page is GetWaitlist at $15 to $50 a month. A landing page with a form is Unbounce at $29 to $249 a month. Sending the list is Mailchimp at $20 to $350 a month, in Build a Mailchimp alternative. The campaign here is the box on a site you already run.

The guardrail is the rule you paste into the prompt. Accept public ingest only from an allowed host with a current key. Rate-limit it. Keep one lead per campaign and email.

How an OptinMonster alternative stores a lead

Imani runs harbormail.com and wants a box on the homepage. The campaign is “November notes”. The headline is “The November notes”. The body is “One email when the notes ship.” The thank-you line is “You are on the list.” The allowed host is harbormail.com. She publishes on November 7, 2026, and the page shows a key she can paste into the snippet.

Sam opens the homepage. The snippet loads, sends the host and the key, and the server writes one impression. The box shows the headline, the body, and an email field. Sam types [email protected] and submits. The lead table gains one row, and the box switches to the thank-you line.

Sam submits the same address again. The table stays at one row. The thank-you still shows. That is the one-lead rule. A different address, [email protected], is a second row.

The seen count is snippet loads, because the guardrail forbids a fingerprint. The goal says “how many people saw it”, and the number you can store without an id is loads. Sam refreshing the homepage makes the count 2. Two loads, one lead, if the email did not change.

A request from pineand.co, or a request with yesterday’s key, writes nothing. No impression, no lead. The card also says to rate-limit the public route. It does not print a number. Put a limit in the prompt, and keep it on the server.

Dismiss is the 2-day row. On this row the box can show again on the next visit. Page targeting, only /pricing for example, is the same row. A second campaign is too. Exit intent, which watches for someone leaving, and an A/B test of two headlines, are the month row.

Your browser, on the allowed host, talks to one Astro app. Node.js plus Astro is the default. Use TanStack Start if React is your weekday language. The capability line on the card is Astro, Alpine, and D1. The campaign, the key, the impressions, and the leads live in D1. Alpine, or a few lines in the snippet, is enough to show the box and swap in the thank-you. The decision to store a row stays on the server.

Imani’s edit screen and the public snippet are different routes. A guessed campaign id, without the current key, returns an empty response.

Screens of an OptinMonster alternative

v1 needs the editor, the box, and the table. A dismiss control and a second campaign are the 2-day row.

The editor

Imani sees the headline, the body, the thank-you, the host, and the key. Publish is what makes the snippet live. The key on the screen is the one the homepage must send.

Publish turns the copy into the box. The host is part of the campaign.

On harbormail.com the box sits over the page. It has the headline, the body, the email field, and a submit button. There is no close control on this row, and there is no second headline to test.

Sam types one address. A dismiss button is the 2-day row.

The lead table

After Sam’s two loads and one email, the table lists Sam. Ren shows up only after the other address is submitted. Search filters by email. The load count for November 7 sits above the rows. A CSV of this table is on the card’s feature list, and it can use the same query once the screen is right.

Two loads, one lead. The same email does not become a second row.

How a visitor becomes a row

Imani publishes. The homepage snippet runs only after that. Node.js plus Astro checks the host and the key before any write. A match stores an impression with the time. A failed check stores nothing, which is how a copied snippet on another site stays empty.

Submit sends the email with the same key. The server looks for that campaign and that email. The first time, it inserts the lead and the response is the thank-you copy. The second time, it inserts nothing and still returns the thank-you, so the box does not look broken. Ren’s address takes the other path and becomes row two.

The lead table reads those rows. The load count is a count of impression rows for the campaign and the local date. Imani does not type either number. If a refresh wrote an impression and the lead insert failed, the screen shows loads ahead of leads, which is the truth of what was stored.

Page targeting, a dismiss flag, and a second campaign are the 2-day row. Exit intent, two headlines in a test, and a gallery of templates are the month row.

Four hours ends when Sam is one row and a repeat submit does not add another.

The snippet and D1 are the v1. The dashed box is targeting, tests, and the template gallery.

Start with the first row

Go to Build your own OptinMonster. Copy the Astro prompt, or TanStack Start if that is what you write.

Tell the agent the first estimate only. A popup, an email field, and a lead table. Four hours.

Publish November notes, open harbormail.com, submit [email protected] twice, and confirm the table has one lead and the load count moved. Paste the host-and-key rule from How to write a coding agent prompt, and keep the three rows in How to scope a SaaS clone. If you need exit intent, a headline test, or a template gallery, keep the plan you already pay for that part.