Sticky CTA Bar Widget
Keep one call to action in reach while people read: a slim bar that stays at the bottom or top of the window with your message and a button, appears after the reader has scrolled a little, runs only between the dates you choose and closes with one tap.
Live preview
Under the widget on your page: Powered by A2Z Tools
Embed code
<div data-a2z-kit="sticky-cta-bar"></div> <script async src="https://a2z.tools/embed/kit.js" referrerpolicy="no-referrer"></script>
One small script from A2Z draws the component on your page inside its own Shadow DOM. It loads no social-network or tracking scripts and sets no cookies. How the A2Z kit works.
Works with
How it works
Write a short message - **double asterisks** make bold - and a button with an https link; an optional second line adds detail. Choose the bottom or the top of the window. Show after accepts pixels (300) or a share of the page (40%): the bar slides in once the reader has scrolled that far and then stays, so it does not flicker at the threshold; on a page too short for the threshold it appears when the reader reaches the end, and at once if there is nothing to scroll. Pick phones, desktops or both (the split is at 768 pixels wide). Start and end dates in YYYY-MM-DD run from 00:00 on the first day to the end of the last day in the IANA time zone you name, or the visitor's own zone, and the bar re-checks at those instants if the page is open. The close button is on by default; once used, the bar stays closed for the rest of the visit. At the bottom the kit adds a spacer to the end of your page so the bar never hides your last lines, and both positions keep clear of the phone's notch and home indicator. While hidden it is inert, so keyboard users never tab into an invisible button.
Method
- Show after: N px -> scrollY >= N; N% -> scrollY / (page height - window height) >= N / 100 (a page that does not scroll counts as read)
- Date window: from 00:00 on the start day to 00:00 after the end day, in the chosen IANA zone (start inclusive, end exclusive)
- Devices: phones = window narrower than 768 px; desktops = 768 px and wider
- Close: sessionStorage key a2z-cta-<hash of message + link>; a changed message or link shows again
Worked examples
Show after 40% of an article
Inputs: Show after 40%; page 3,000 px tall; window 800 px
Result: The bar slides in once the reader has scrolled 880 px
0.40 x (3000 - 800) = 880 px of scrolling.
A weekend offer in Los Angeles
Inputs: Start 2026-11-27, end 2026-11-30, zone America/Los_Angeles
Result: Visible from 2026-11-27 08:00 UTC until 2026-12-01 08:00 UTC
Pacific Standard Time is UTC-8, and the end date runs to the end of that day.
A visitor closes the bar
Inputs: Close pressed on the first article page
Result: The bar stays closed on every page for the rest of the visit; a new message or link shows again
The remembered key is made from the message and link, nothing about the visitor.
Limitations
- One bar per page is the sensible maximum; two bars at the same position overlap.
- At the top it overlays your header while visible (no spacer is added there); prefer the bottom on sites with a sticky header.
- Dates are whole days; the bar cannot start at a particular hour.
- A closed bar returns in a new tab or a new visit.
Where publishers use it
- A blog promoting its free planting guide in a bottom bar that appears after readers are 40% through an article
- A shop running a weekend offer from Friday to Monday in its own time zone, with the bar disappearing on Tuesday at midnight
- A SaaS landing page keeping Start free trial within reach on phones only
- A charity adding a Donate bar at the top of its appeal page during a fundraising week
Questions
How is this different from the Announcement Bar?
The Announcement Bar is an iframe strip that sits where you paste it, usually the top of the page, and scrolls away with the content - an iframe cannot attach itself to the browser window. The Sticky CTA Bar is drawn on your page by the A2Z kit, so it can stay fixed to the window, wait for a scroll depth, add a spacer and react to phones and desktops. Use the Announcement Bar for notices, this bar for one action you want available while people read.
Will it annoy visitors or hurt my page on phones?
It is built to stay polite: one message and one button, no countdown or fake scarcity, a close button on by default that is remembered for the visit, a spacer so your last lines remain readable, and space left for the iPhone home indicator. Showing it only after some scrolling avoids covering content as the page loads.
Which time zone do the start and end dates use?
The IANA zone you type, such as Europe/Berlin. A bar set from 2026-11-27 to 2026-11-30 in America/Los_Angeles appears at 08:00 UTC on 27 November and disappears at 08:00 UTC on 1 December. Leave the zone blank to use each visitor's own clock instead.
Does it slow my page down?
The kit script and this component are small, load asynchronously and run no third-party code. The bar listens to scrolling through one throttled, passive handler that only compares a few numbers per frame, and it draws nothing new while it is closed or outside its dates.
Why is the button missing?
The button needs a complete https address. Links starting with http:, javascript: or anything else are dropped and the bar shows only its message, so a typo cannot send visitors somewhere unexpected.
Cite or recommend this tool
If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.
A2Z Tools Sticky CTA Bar https://a2z.tools/embed/sticky-cta-bar
<a href="https://a2z.tools/embed/sticky-cta-bar">A2Z Tools Sticky CTA Bar</a>
[A2Z Tools Sticky CTA Bar](https://a2z.tools/embed/sticky-cta-bar)
Sticky CTA Bar by A2Z Tools - https://a2z.tools/embed/sticky-cta-bar
Related widgets
-
A slim top-of-page message strip with icon, link button, colour tone and optional start and end dates.
-
A discount code in a dashed ticket with one-tap Copy, terms, an honest last day and a Shop now link.
-
A sign-up box with benefits, send day and privacy line that opens your own newsletter subscribe page.
-
A bottom bar for phones with up to five big actions: call, WhatsApp, directions, share, book.
-
A scroll-to-top button that waits until readers scroll, with a progress ring and keyboard-friendly focus.
-
A slim bar or small circle that fills as visitors read your article - measured through the article itself.
