Floating inquiry button: placement, copy, timing, and mobile fit

Floating inquiry button placement and conversion: bottom-right thumb zone wins, and mobile needs its own sizing and expand panel

Floating inquiry button: placement, copy, timing, and mobile fit

Bottom line first: A floating inquiry button done right lifts page inquiries by 15% to 25%. Done wrong, it just covers content and drags down the user experience. The essentials: pin the button to the bottom-right thumb zone, use “Get a Quote” instead of “Contact Us”, and only show it after 30% scroll; on mobile, make the button 48 to 56px across and open a bottom drawer instead of a full-screen popup; hide the button on form pages, article pages, and any page that already has a conversion entry point so it doesn’t compete with itself.

1. The conversion baseline for floating buttons: placement decides clicks

The floating inquiry button is a permanent conversion entry point on your site. Its value isn’t “more exposure” — it’s “giving hesitant visitors an exit they can click without hunting for it.” A user gets interested halfway through reading, doesn’t need to scroll back to the top for Contact Us, and can start an inquiry right from the bottom-right button.

Placement is the single biggest factor in a floating button’s conversion rate. The counterintuitive finding: the most visible spot, top right, actually performs worst, because it covers the nav bar and the user’s first instinct is to close it. Bottom right is the sweet spot — on mobile it lands right in the thumb zone.

Location	Desktop click rate	Mobile click rate	Content overlap	Recommendation
Bottom right	2.5% to 4%	4% to 6%	No content overlap	Best choice
Bottom left	2% to 3.5%	3% to 5%	No content overlap	Second choice, left-handed friendly
Top right	0.8% to 1.5%	1% to 2%	Covers the nav bar	Not recommended
Floating mid-screen	0.5% to 1%	0.8% to 1.5%	Covers body content	Never use
Full-width fixed footer	1.5% to 2.5%	2.5% to 4%	Covers footer content	Fine on mobile, not on desktop

The table above reflects experience from B2B sites. Numbers shift by industry, but the pattern holds: bottom right is best, and the closer you move to the center, the worse it gets. If the page already has a large inquiry button at the bottom, the marginal value of a bottom-right floating button drops. For conversion path design, see Inquiry landing page conversion rate.

2. Button copy: from “Contact Us” to “Get a Quote”

Button copy is the second lever. Most sites write “Contact Us” — that describes an action, not a benefit. When B2B buyers see “Contact Us”, they don’t know what happens after they click: send an email? Fill out a form? Wait for a sales call? That uncertainty directly kills the urge to click.

Good copy states the outcome. “Get a Quote” converts 2-3x better than “Contact Us” because it’s clear what happens after the click. Outcome-driven copy like “Download the Spec Sheet,” “Book a 15-Minute Demo,” and “See Case Studies in Your Industry” all convert better. For button tone, see B2B website copy tone guidelines.

Copy type	Example	Expected click-through rate	Where it applies
Outcome-driven	“Get Today’s Pricing”	3% to 5%	Product pages, price-sensitive pages
Resource-driven	“Download the PDF Spec Sheet”	2.5% to 4%	Product detail pages, technical docs
Demo-driven	“Book a 15-Minute Demo”	2% to 3.5%	Solution pages, demo pages
Case study-driven	“See Case Studies in Your Industry”	1.5% to 3%	About page, solution pages
Action-based	“Contact Us”	0.8% to 1.5%	Not recommended

One more detail on copy: the shorter the button text, the better. On desktop you can fit an icon plus a short line of text; on mobile you’re limited to about 6 characters. “Get a Quote” is just right, while “Contact Us for More Information” is too long and won’t fit on mobile.

3. When to Show It: Don’t Pop Up the Moment They Land

People often overlook when the floating button appears. Many launch with it set to show as soon as the page loads, so a button pops up in the bottom-right corner before the user has even started reading, and that shapes their first impression. The right approach is to delay it and let users settle into the content first.

The recommended logic: show it after 30% scroll depth, with a 200ms fade-in rather than a sudden pop. Counterintuitively, the earlier the button appears, the lower the click-through rate, because clicks that happen before someone finishes reading are usually accidental, not real intent.

When to show	Trigger	Expected click-through rate	How the user feels	Recommendation
Show on page load	DOM Ready	1% to 2%	Interrupted, annoyed	Not recommended
Show after 3 seconds	Time-triggered	1.5% to 2.5%	Acceptable	Fallback option
Show after 30% scroll	Scroll-depth triggered	3% to 5%	Feels natural	Preferred option
Show after 70% scroll	After deep reading	2% to 3.5%	Appears only after they finish	Good for content pages
After detecting user intent	Hover/click hesitation	3.5% to 5.5%	Just right	Advanced option

There’s also an exclusion rule for timing: on pages that already have a clear conversion path, the floating button should be hidden. An inquiry form page, for example, is already asking users to fill out a form, and adding a button in the bottom-right corner makes them hesitate mid-way and lowers form completion. The same applies to article and blog pages. For hiding rules, see Inquiry Form Field Design and Conversion Rate‘s form completion optimization logic.

4. Mobile: Size, Position, and the Expanded Panel

Floating buttons on mobile are a completely different design problem from desktop. Mobile screens are small, so button size, position, and the expanded panel design directly determine whether users tap. Mobile has three hard specs: button diameter, margins, and panel height.

Buttons should be 48–56 px in diameter — any smaller and they’re hard to tap, any larger and they cover content. Keep them 16–20 px from the screen edge. Open the panel as a bottom sheet that slides up from the bottom of the screen and takes up no more than 60% of the screen height, so users can fill in a few fields without a full-screen jump.

Item	Desktop standard	Mobile standard	What happens if you miss it
Button diameter	48–64 px	48–56 px	Too small and it’s hard to tap, too large and it covers content
Distance from screen edge	24 px	16–20 px	Too far and users can’t reach it, too close and it hugs the edge
How it opens	Small card popping up in the bottom-right corner	Bottom sheet panel	Full-screen popups get closed more than 80% of the time
Panel height	Auto height, max 300 px	No more than 60% of the screen	Too tall and it feels like a new page, so users just close it
Safe area handling	No	Keep clear of the bottom gesture bar	The button gets covered by the system gesture bar

There’s another common mobile problem: a full-width bottom button clashing with the system navigation bar. Many standalone sites put a fixed inquiry button at the bottom on mobile, and it ends up hidden behind the iOS Home Indicator or the Android gesture navigation bar. You have to use CSS env(safe-area-inset-bottom) to leave room for the safe area. For mobile performance optimization, see Core Web Vitals‘s mobile-specific checklist.

5. Common mistakes and red lines

Mistake	What teams do	What actually happens	The right way
Show it on every page of the site	Put it on the homepage, blog and form pages	On form pages the button steals the form’s conversions	Hide it on form pages and article pages
Button text says “Contact Us”	The most generic wording	Click-through rate below 1.5%	Use outcome-driven copy: Get a Quote
Show the button as soon as users land on the page	It appears as soon as the page loads	Users feel interrupted, so click-through rate is low	Fade in after 30% scroll
Use a full-screen popup on mobile	Tapping the button opens a full-screen form	Close rate above 80%	Bottom sheet panel, half-screen height
The button is too small to tap accurately	Just drop in a 32 px icon	High rate of accidental taps on mobile	48–56 px diameter
No safe area for the bottom button	Fixed to the very bottom of the screen	Gets covered by the system gesture bar	加env(safe-area-inset-bottom)

Of these six mistakes, the first is the sneakiest — many people assume a floating button is “standard on every site,” but on form pages it becomes a distraction: users are halfway through filling in the form, see the button in the bottom-right corner, hesitate, and then close the page. You must hide the floating button on form pages — don’t create your own competitor.

FAQ

Where’s the best place to put a floating inquiry button?

The bottom-right corner is the first choice. On desktop the bottom-right corner gets a 2.5%–4% click-through rate, and on mobile 4%–6%, because the bottom-right corner is in the thumb zone — when users operate one-handed, that’s where the thumb naturally lands. The bottom-left corner is second best, and it’s friendly to left-handed users. The top-right corner is the most visible but has the worst click-through rate (0.8%–1.5%), because it covers the navigation bar and users’ first instinct is to close it. A floating element in the center of the screen is the worst, because it directly covers the body content. The core principle for choosing a position is: don’t cover content, and land where the user’s thumb or mouse naturally falls.

What copy on a floating button converts best?

Outcome-driven copy wins: “Get today’s quote” converts at 3% to 5%, “Download the PDF spec sheet” at 2.5% to 4%, and “Book a 15-minute demo” at 2% to 3.5%. Action-description copy (“Contact Us”) performs worst, at just 0.8% to 1.5%. The reason: B2B buyers don’t care what you want them to do, they care what they get after they click. Shorter is better, and on mobile keep it under 6 Chinese characters or it won’t fit.

When should the floating button appear?

Show it after the user scrolls 30% down the page, with a 200ms fade-in. Showing it on page load converts at only 1% to 2%, because the user has just arrived and hasn’t started reading before the button interrupts them. Showing it after 30% scroll converts at 3% to 5%, because the user is already reading carefully, so the button feels like a shortcut, not an interruption. On article pages you can wait until 70% scroll, since the goal there is reading, not a direct inquiry.

How should the floating button adapt to mobile?

Mobile has three hard requirements: a button diameter of 48 to 56px, 16 to 20px from the screen edge, and an expanded panel as a bottom sheet no taller than 60% of the screen. Never use a full-screen popup, which gets closed more than 80% of the time on mobile. A bottom sheet slides up from the bottom of the screen, so users can fill in a few fields without jumping to a new page. Also add CSS env(safe-area-inset-bottom) to clear the iOS and Android gesture bars, or the button will be covered and unclickable.

Which pages should hide the floating button?

Three types of pages should hide it: first, inquiry form pages, where the form itself is the conversion point and a button in the bottom right makes users hesitate and lowers form completion; second, article and blog pages, where the goal is reading and whitepaper downloads, not starting an inquiry; third, checkout or payment pages, where any distracting element lowers payment completion. Implement the hiding rules by matching page URLs or checking page type, not by showing it sitewide.

Does the floating button conflict with the exit popup?

Yes, and you have to coordinate them. First, once a user clicks the floating button to open the panel, the exit-intent popup should no longer trigger, so two conversion entry points aren’t competing for the same person. Second, visitors who have already submitted an inquiry through the floating button should not see the floating button again for 7 days, and should not trigger the exit popup either. Third, track floating button clicks separately and tag the source (floating-button) instead of mixing them into the normal form path. Coordinated well, the two complement each other: the floating button is the always-on entry point, and the exit popup is the fallback.

Final thoughts

A floating inquiry button looks like a front-end design issue, but it’s really a permanent addition to your DTC site’s conversion path. Its value isn’t in “letting more people see the inquiry entry point” — it’s in “letting people who are already interested but need one more nudge find the entry point without hunting around.” Position, copy, timing, and mobile adaptation: get all four right and it’s a booster; get them wrong and it’s an obstacle.

Four steps to launch: first, pin the button to the bottom right, avoiding any page that already has a conversion entry point; then change the copy from “Contact Us” to a results-driven phrase like “Get a Quote”; then set it to fade in after 30% scroll; finally, adapt it for mobile separately — 48 to 56px button, bottom drawer panel, safe area support. None of these three can be skipped.

One line worth remembering: a floating button isn’t “an ad slot that’s everywhere” — it’s “a door left open for the hesitant.” Position it in the thumb zone, make the copy state the result clearly, and let it appear only when the user is ready. That’s when it becomes a conversion booster instead of a distraction.