Floating CTA
A floating CTA is a compact call-to-action button or widget that hovers above the page content, usually anchored to a corner, and stays in place as the visitor scrolls.
Key takeaways
- A floating CTA overlays a corner with fixed offset and high z-index.
- Corner choice matters: thumb-zone placement raises both intentional and accidental taps.
- Best used on content pages whose templates have no built-in funnel entry.
- Suppress it on funnel pages that already carry a dedicated primary CTA.
- Too small to explain an offer, so only use for already-understood actions.
In depth
A floating CTA is an overlay element positioned against a viewport corner with a fixed offset and a z-index high enough to sit above the page. Because it never spans the full width, it does not participate in the page grid at all and can be added without reflowing anything below it. Most implementations attach a display rule to it: appear after a delay, after a scroll percentage, or when the visitor's pointer heads toward the tab bar. It usually holds one icon or a short label, sometimes both.
The corner it occupies decides much of its performance. On phones the lower right sits inside the natural thumb arc, which raises accidental taps as well as intentional ones, while the upper corners are safer but easier to ignore. Delay tuning is the second lever: appearing immediately trains people to dismiss the widget before reading, appearing very late reaches only the small share who stayed. Size trades reach against intrusion, since a larger pill is noticed more and covers more.
Teams use a floating CTA where the primary conversion path lives elsewhere on the site: documentation, feature pages, blog posts. Rather than rebuilding each template around a funnel entry, one persistent button links into it. On a quiz funnel this means a reader on any content page can open the scorecard from where they are, carrying a source parameter that records which article sent them. The button is normally suppressed on the funnel pages themselves, where a dedicated CTA already exists.
The pattern collapses when several floating elements compete. A chat launcher, a cookie manager reopen icon, a back-to-top arrow and a CTA pill all claim the same corners, and the last one rendered wins visually while the others become unreachable. Floating CTAs are also weak carriers of nuance: there is no room to explain an unfamiliar offer, so they work only for actions the visitor already understands from the page they are reading. On pages whose content runs edge to edge, such as wide tables or maps, the overlay permanently hides a corner of it.
Example in practice
How to measure it
Compare impressions to clicks: how many sessions actually saw the button after its delay or scroll trigger fired, and how many of those tapped it. A low rate against high impressions usually points at placement or label, not at demand. Then look at what happens next, because a floating CTA that produces clicks but very short sessions afterwards is attracting curiosity rather than intent.
Measure by entry page, not site-wide. The whole point of the pattern is capturing readers from templates that lack their own funnel entry, so break clicks down by the article or documentation page they came from. Track the dismissal rate too: a rising share of visitors closing the button is an early warning that the delay is too short or the pill too large.
Common mistakes
The classic failure is corner collision. A chat widget and a floating CTA both default to the bottom right, so one silently covers the other, and nobody notices because the team tests on a desktop where the widget is collapsed. Assign each persistent element an explicit corner and offset, keep one per corner at most, and check on a small screen with every third-party script actually loaded rather than in a stripped staging build.
The second is a button with no exit. A floating CTA that cannot be dismissed follows the reader through an entire long article and becomes an irritant rather than a shortcut. Give it a small close control, remember that choice for the session, and hide it automatically while a modal, lightbox or form is open. Also make sure keyboard focus reaches it in a sensible order instead of jumping there first.
Frequently asked questions
Is a floating CTA the same as a pop-up?
No. A floating CTA is a persistent, unobtrusive button that stays in a corner and never blocks the whole screen. A pop-up interrupts the page with an overlay that demands attention and usually must be dismissed.
Where should I place a floating CTA?
The bottom-right corner is the most common because it sits near the natural resting position of the thumb on mobile. Make sure it does not overlap chat widgets, navigation, or content, and give it enough spacing to avoid mis-taps.
Will a floating CTA slow my page down?
On its own it has negligible performance impact since it is a small element. The risk is loading it through a heavy third-party script, so prefer a lightweight, native implementation where possible.
Where should a floating CTA be placed on mobile?
Bottom right is the usual default because it falls inside the thumb arc, but only if no other widget already lives there. If a chat launcher occupies that corner, move the CTA to the bottom left rather than stacking. Keep a comfortable margin from the screen edge so the button does not collide with system gesture areas or the browser toolbar.
How long should the delay be before a floating CTA appears?
Long enough that the visitor has begun reading, which in practice means tying it to scroll progress rather than a timer. A button that appears while the page is still settling gets dismissed reflexively. Triggering after the first content section has scrolled past gives a signal of engagement and avoids interrupting the first impression.
Can a floating CTA and a chat widget coexist?
Yes, but only with deliberate placement and different visual weight. Give them opposite corners, make one clearly primary through size and colour, and collapse the chat launcher to an icon. If both must sit on the same side, merge them into a single expandable control rather than letting two overlays fight for the same pixels.
Does a floating CTA hurt SEO or accessibility?
It has no direct ranking effect, but it can fail accessibility checks. The overlay must be reachable by keyboard in a logical tab order, must not trap focus, and must meet contrast requirements against whatever scrolls beneath it. On mobile a large persistent overlay covering content can also be treated as an intrusive interstitial pattern, so keep it small.
What should the label on a floating CTA say?
Two or three words naming the outcome, because there is no room for framing. Something like the name of an assessment works when the page has already introduced it; an abstract verb alone does not. If the offer needs explaining, the floating button is the wrong container and the action belongs in an inline section instead.
Should the floating CTA appear on every page of the site?
No. Exclude the funnel pages, the checkout or booking flow, and any page whose own primary CTA is the same action, otherwise you duplicate the button and split the click data. Restrict it to templates that were not designed around conversion, such as blog articles, documentation and support pages, where it genuinely adds a missing entry point.