Announcement Popup

Customize and copy this announcement popup for your website.

A popup (a card that appears over the page, not inside it) tells every visitor one thing, like to promote a new feature or an upcoming event.

Set the options, copy the instructions, and your AI builds it into your own site.

What it does

This announcement popup lets your visitors know about one major thing that's happening.

Like a release, an event, and sends them to the page about it.

It floats near a corner so people keep browsing, or sits centered over a dimmed page for big news.

It has five parts:

a bold title (8 words max)
one or two lines of text (25 words max)
one full width call to action button
a small X to close it
an optional picture or emoji on the top edge

To add it to your website all you have to do is customize the options, then copy the prompt above and paste it in your AI (ChatGPT, Claude, Cursor, whatever you use). It builds the popup in your site's colors and fonts with the customization options you selected here.

How it works

The card slides in, right away, after 4 seconds, or once the visitor has scrolled 30% of the page.
A picture or an emoji on the top edge catches the eye, if you added one.
The visitor reads the bold title and the short text, so they know what is new in seconds.
The call to action button takes them to the page about it, your news page or blog post.
The X closes the card, or a tap on the dimmed page when centered, so they can put it away and keep browsing in peace.
Once closed, it remembers, and stays away for the visit, for 7 days, or comes back every time, your call.

What you can customize

Position: choose to put it in a corner (bottom right, bottom left, top left) or at the center over a dimmed page. It starts in the bottom right corner by default.
Illustration: choose none, your own image, or one big emoji, in a white circle on the top edge. The card has no illustration by default.
Button text: choose Learn more, See what's new, or Read the update. Learn more is the default.
Custom button text: you can add your own label, with 24 characters max. Leave it empty and it keeps the button text above.
When it shows: choose if the card shows right away, after 4 seconds, or once the visitor has scrolled 30% of the page. It shows right away by default.
After close: choose how long the card stays away after the X, the rest of the visit, 7 days, or not at all. By default it hides it only for this visit, but shows again the next time the visitor comes.
Where it shows: choose desktop and mobile, desktop only, or mobile only. It shows everywhere by default.
Theme: choose a dark card with white text or a light card with dark text. On this template we put dark by default but you get to choose.

Pushing an offer rather than sharing news? The floating promo card does that with a row of playful icons and one big button.

Announcing a discount? A first-visit discount popup hands new visitors the code the moment they land.

You'll also like

Order Bump Box

A checkbox offer above the pay button that adds one extra item to the order. Price straight from config.

Micro Survey Popup

A one-question feedback widget with an emoji scale. Two taps to answer, zero friction, real data to your backend.

Glow Pulse Button

Customize this glow pulse button design and use it on your own website. It's a button with a soft light around it that grows and fades in your brand color. You can keep the glow pulsing all the time, or only when someone hovers over the button.

Announcement Popup

Customize and copy this announcement popup for your website.

A popup (a card that appears over the page, not inside it) tells every visitor one thing, like to promote a new feature or an upcoming event.

Set the options, copy the instructions, and your AI builds it into your own site.

You are helping me add a design from CopyDesign to my own website or app.
This prompt is reserved for CopyDesign members. Join to unlock the full prompt for this design and every other design in the library.

STRUCTURE
- The full prompt describes every part of the design: the layout, the sizes, the spacing, the colors, the fonts and the exact wording.
- It lists the options I picked on the design page, so the result matches what I saw in the live preview.
- It tells you which pieces are required and which ones are optional, so nothing important is left out.

BEHAVIOR
- The full prompt explains how the design reacts: what happens on hover, on click, on scroll, on small screens and on large screens.
- It covers the edge cases, like an empty state, a very long text or a slow connection, so the design keeps working in real use.
- It describes any motion or animation, with timings, and when to reduce it for people who prefer less motion.

QUALITY
- The full prompt sets the bar: the design must be responsive, accessible, fast and easy to maintain.
- It asks you to reuse my existing styles, colors and fonts, so the design fits the rest of my site instead of standing out.
- It asks for clean, readable code that I can adjust later without help.

QUESTIONS
- The full prompt ends with the questions you should ask me before you build, so the result is mine: where the design goes, what it should say, which colors to use and how it should behave.
- Members get this prompt with one click, and the price they join at never changes.

Members only