Announcement Popup

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

1. 01

   The card slides in, right away, after 4 seconds, or once the visitor has scrolled 30% of the page.

2. 02

   A picture or an emoji on the top edge catches the eye, if you added one.

3. 03

   The visitor reads the bold title and the short text, so they know what is new in seconds.

4. 04

   The call to action button takes them to the page about it, your news page or blog post.

5. 05

   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.

6. 06

   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.