Welcome Discount Popup

A first-visit-only popup that greets new visitors with a real offer. Shows once, then leaves people alone.

Copied 0 times.

Welcome! Here's 10% off

Your first order just got better.

WELCOME10

Claim my offer

No thanks

Customize the prompt

When does it show?What is the offer?

Build a welcome discount popup for my website. Match my existing design system, colors, and fonts.

STRUCTURE
- A full-viewport overlay (semi-transparent dark background) with a centered card, max width 420px, rounded corners, generous padding.
- Card contents, top to bottom: close X (top-right), a short bold welcome headline, one supporting line, the offer itself, one CTA button, and a small "No thanks" dismiss link.

OFFER
- The offer is a percentage discount: headline like "Welcome! Here's 10% off your first order", the code shown in a dashed-border box. Adapt the percentage and wording to my business.
- The offer values (percentage, amount, threshold, code) live in one config constant at the top of the file so I can change them without touching markup. Never invent an offer: if the config is empty, the popup does not render.

TRIGGER
- Show it 2 seconds after page load, so the page renders first and the visitor gets a beat before the offer.
- First visit ONLY: when the popup shows or is dismissed, set a localStorage flag and never show it again while the flag exists. Returning visitors never see it.

BEHAVIOR
- Close on: the X, the "No thanks" link, a click on the overlay outside the card, and the Escape key.
- The CTA either applies the offer (link with the code as a URL param) or copies the code to the clipboard with a brief "Copied" confirmation; leave a clearly marked TODO for wiring it to my cart or checkout.

ACCESSIBILITY AND QUALITY
- Trap focus inside the card while open; return focus to the previously focused element on close.
- role="dialog", aria-modal="true", aria-label on the close button.
- Fade + slight scale-in, 150-200ms, no bounce.
- Full-width card with margins on small screens.
- No layout shift on the page behind (compensate for scrollbar removal).

QUESTIONS
- Before you build, find or ask for: the real offer values (percentage or amount, any minimum order, and the actual code). Check my project and site first; whatever you cannot find there, ask me for. Never invent these or ship placeholders.
- If anything else about my brand or content is unclear, ask me before inventing.

What it does

A welcome popup greets brand-new visitors with something worth stopping for: a percent off, a few dollars off, or free shipping on their first order. It's one of the oldest tricks in online selling because it works. Someone holding a discount code has a reason to buy today, not someday.

Shows once, ever. The visitor's browser remembers, so nobody gets nagged on a return visit.
The offer is real by design; you type your numbers and code into one marked spot.
Leave that spot empty and the popup simply never shows.
The button applies the code for them or copies it with a quick Copied note.

How it works

1Choose when it pops up, 2 seconds after the page loads or after 10 seconds of browsing, and pick the offer: percent off, dollars off, or free shipping.
2Copy the prompt, a ready-to-paste brief for your AI, into whichever AI you use.
3Your AI builds the popup in your site's own look, then you fill in the real offer: the amount, any minimum order, and the code.
4Visitors can close it four ways, the X, No thanks, a click outside the card, or the Escape key, and it never comes back after that.
5Test it in a private browser window like a first-timer, then reload to make sure it showed once and stays gone on every visit after.

What you can customize

When it shows: 2 seconds after load catches everyone; waiting 10 seconds saves the offer for people who actually stuck around.
The offer: percent off, a fixed amount with any minimum order spelled out, or free shipping, each with the code shown in a neat dashed box.
Headline, colors, and the exact numbers adapt to your store, because your AI builds the popup right inside your own design.