Floating CTA Card

What it does

This floating CTA card gets the visitor's attention to get them to go where you want them to go.

Like to subscribe to your service, see an offer, learn more about a specific service or event.

It floats over one corner, so visitors see your offer without losing their place.

It has four parts:

• a row of playful icons over the top edge
• a short headline (6 words max) and one description line (12 max)
• one full width button with an arrow
• a small X to close it

On phones (iPhone, Android) it stretches across the whole screen.

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 (Gemini, Grok, Copilot, whatever you use). It builds the card in your site's colors and fonts with the customization options you selected here.

How it works

1. 01

   The card slides in at one corner, right away, after a few seconds, or once the visitor scrolls.

2. 02

   A row of playful icons sits over the top edge to catch the eye.

3. 03

   The visitor reads the headline and the line under it, your offer in a few words.

4. 04

   One full width button with an arrow sends them where you want, your signup page or shop.

5. 05

   A small X in the top corner closes the card, this way they can hide it and continue browsing your site without getting disturbed.

6. 06

   After a close, the card stays hidden for the rest of the visit, or for 7 days, or shows again next visit.

What you can customize

• Corner: where the card floats. The preview shows the bottom right corner by default. If you already run social proof notifications there, give the card the other corner.
• Icons on top: rewards (trophy, gem, star, bolt, money bag), shopping (bag, tag, gift, percent), or none. Rewards is the default.
• Button color: five colors, or match my site so your AI reuses your site's button color. The button is yellow by default.
• Button text: four ready-made labels. The preview says Start now by default.
• Custom button text: your own words on the button. Leave it empty and it takes the button text above by default.
• When it shows: choose if you want the floating CTA to show right away, after a few seconds, or once the visitor scrolls. Right away is the default.
• After close: choose how long the card stays away after the visitor clicks on the X. It can stay hidden for the visit, for 7 days, or show again next visit. It stays hidden for the visit by default.
• Where it shows: desktop, mobile, or both. It shows on both by default.

The button here is plain on purpose. For a button that catches the eye on its own, look at a shining button design.

Would you rather push the same offer in a slim bar across the page than in a corner card? That job belongs to the sticky CTA banner.

This card never blocks the page. To greet first-time visitors with a full offer instead, there is the welcome discount popup.

Are you sharing news rather than pushing an offer? The popup that announces one thing gives it a title, a short text and a button.

Want the corner card to open a quick tour of your site rather than an offer? That's the onboarding popup design.