Sticky CTA Banner
A slim banner that stays on screen and drives one action. Pick where it sits and what it pushes.
Copied 1 time.
Customize the prompt
Build a sticky CTA banner for my website. Match my existing design system, colors, and fonts. STRUCTURE - A slim full-width bar, about 48-56px tall on desktop, with: one short message (max 10 words), one CTA button, and a small dismiss X at the far end. - Stick it to the top of the viewport, above the header if the header is not sticky, otherwise directly below the sticky header. - On mobile, the message truncates gracefully and the button stays visible; never two lines. GOAL - The banner announces a promotion: message like "20% off everything this week", button "Shop the sale". Adapt wording and offer to my business. BEHAVIOR - Dismissing it sets a flag in localStorage and keeps it hidden for 7 days. - The bar must not cover content: add the bar's height as padding to the page side it sticks to, so nothing is hidden behind it. - Slide it in 600ms after page load, subtle animation (200ms). QUALITY - High contrast between bar background and page (use my brand's accent color for the bar or the button, not both). - role="region" with an aria-label, dismiss button keyboard-accessible. - No layout shift when it appears (reserve the space or animate the padding with it). QUESTIONS - Before you build, find or ask for: the real offer or announcement the bar carries, and the CTA's label and destination URL. 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 sticky CTA banner is the skinny bar that stays glued to the edge of the screen while people scroll, carrying one short message and one button. You want it when your site has something worth shouting about everywhere (a sale, a free trial, a launch) and you can't count on visitors reaching the part of the page that mentions it. The bar never scrolls away, so the offer is always one tap away.
- The message caps at ten words, a nudge, not a shout.
- The page gets a little padding, so the bar never covers your content.
- Close it once and it stays gone for seven days; nobody gets nagged twice in one week.
How it works
- 1Pick where the bar sticks, top or bottom of the page, and what it pushes: a promo, a signup, or an announcement. The preview updates as you tap.
- 2Hit copy to grab the prompt, the block of text that tells your AI exactly what to build, sized and tuned to the options you picked.
- 3Paste it into whichever AI you use (Claude, ChatGPT, Cursor, any of them) and it rebuilds the banner in your site's own colors and fonts.
- 4Your AI wires up the behavior too: the bar slides in just after the page loads, never hides your content, and works with a keyboard.
- 5Before you ship it, peek at your phone: the message should stay on one line, the button visible, and closing it should keep it gone a week.
What you can customize
- Placement: top makes it feel like a site-wide announcement above everything; bottom stays out of your header's way and feels lighter on a phone.
- Goal: promo, signup, or announcement. Each swaps in matching words and a matching button, from sale wording with a shop button to a news line with Learn more.
- Words, colors, and sizing all adapt to your site automatically, because your AI builds the banner right inside your own design.
You'll also like
Hero Section
The section that sells the page in three seconds: headline, subline, and the action you want taken.
Badge Row
A row of guarantee and trust badges: only claims you can actually honor, each one config-driven.
We use cookies for basic stats. Privacy
Cookie Consent Banner
A compliant consent bar that blocks nothing, remembers the choice, and defaults to declining non-essential.