Picture the person most likely to visit your therapy website this week. They are probably not sitting at a desk. They are on their phone — maybe on the couch after the kids are asleep, maybe in a parked car between errands — finally working up the courage to look for help. They scroll your homepage, read a little about you, feel a flicker of “maybe this is the one”… and then they can’t find the button. The “Book a Session” link they saw at the top of the page is long gone, hidden behind a hamburger menu. The moment passes. They close the tab.
That tiny moment of friction costs therapy practices real clients, because reaching out to a therapist is already one of the hardest buttons anyone will ever tap. The fix is one of the simplest, highest-impact changes you can make to your website in 2026: a sticky “Book a Session” button — a calm, always-visible bar that stays anchored to the bottom of the screen on phones, exactly where a thumb naturally rests. In this guide you’ll get the exact copy-paste HTML and CSS (with a live demo), plus instructions for adding it to any WordPress site, including Divi and block themes. No plugin needed, and it takes about 15 minutes.
On most therapy websites, well over half of visitors arrive on a mobile device, and the pattern is consistent: people research therapists on their phones first, then reach out when they feel ready. The problem is that “ready” can arrive at any point on the page — halfway through your About section, at the end of a blog post, while reading how you work with anxiety. If the booking link only lives in your header, the visitor has to stop, scroll all the way back up, and hunt for it. Every extra step gives anxiety a chance to win.
A sticky bottom button solves this quietly. It sits in the “thumb zone” — the area of the screen easiest to reach one-handed — and it is visible the entire time someone reads. There’s a reason nearly every successful booking-driven mobile experience, from restaurant apps to airlines, anchors its main action to the bottom of the screen. For a therapy practice the effect is even stronger, because your visitor’s decision is emotional and fragile: the button being right there at the exact second they feel ready is often the difference between a consultation request and a closed tab.
And because this is a therapy site, the button should never feel pushy. We’re not building a flashing “BUY NOW” banner. We’re building something closer to a hand kept gently open: soft color, rounded shape, unhurried words.
Before touching any code, decide what the button says. For counseling and private-practice sites, softer phrasing consistently feels safer to first-time visitors than sales language. Good options include “Book a Session”, “Schedule a Free Consultation”, “Reach Out Today”, or “Book a Free 15-Minute Call”. Avoid urgency tricks like “Don’t Wait!” or “Limited Spots!” — the visitors you most want to reach are already nervous, and pressure reads as a red flag on a mental-health site. One clear, kind action is enough.
If you offer a free consultation, say so on the button. Naming the low-stakes first step (“free 15-minute call”) lowers the emotional cost of tapping more than any design trick can.
Here’s what the finished result looks like on a phone. Notice how the reader can keep scrolling the page while the booking bar stays put at the bottom of the screen:
Live demo
You’ve been carrying this for a long time. Maybe it looks like overthinking every conversation, a racing heart at 2 a.m., or the feeling that you can never quite relax.
Therapy gives you a private, judgment-free space to slow those thoughts down and understand where they come from.
In our first session, we’ll simply talk about what’s been going on and what you’d like to change. There’s nothing to prepare and no pressure to share more than you’re ready to.
Many clients tell me the hardest part was reaching out — and that they wish they’d done it sooner. Whenever you’re ready, I’m here.
Keep scrolling — the button below never moves out of reach.
Now the code. First, the HTML — this is the bar and the button itself. You’ll paste this once, near your site’s footer (Step 3 shows exactly where):
<div class="wc-book-bar">
<a class="wc-book-btn" href="/book-a-session/">Book a Session</a>
</div>
Change /book-a-session/ to your real booking or contact page, and change the wording to whatever you chose in Step 1. Then add the CSS:
/* Sticky booking bar — mobile only */
.wc-book-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(6px);
box-shadow: 0 -4px 16px rgba(31, 58, 58, 0.14);
}
.wc-book-btn {
display: block;
max-width: 420px;
margin: 0 auto;
padding: 14px 24px;
border-radius: 999px;
background: #4c7c74; /* calm sage green — use your brand color */
color: #ffffff;
font-size: 17px;
font-weight: 600;
text-align: center;
text-decoration: none;
letter-spacing: 0.2px;
transition: background 0.2s ease;
}
.wc-book-btn:hover,
.wc-book-btn:focus-visible {
background: #3d645d;
outline: 3px solid #9ec7bf; /* visible keyboard focus = accessibility win */
outline-offset: 2px;
}
/* Give the page breathing room so the bar never covers your footer */
body {
padding-bottom: 88px;
}
/* Desktops already show your header button — keep this mobile-only */
@media (min-width: 768px) {
.wc-book-bar { display: none; }
body { padding-bottom: 0; }
}
A few details in there are doing quiet, important work. The env(safe-area-inset-bottom) keeps the button above the iPhone home indicator instead of colliding with it. The padding-bottom on the body stops the bar from covering the last lines of your pages. And the focus-visible outline means visitors navigating by keyboard or switch device can actually see the button when it’s selected — a small touch that matters on an inclusive practice site.
Go to Appearance → Customize → Additional CSS, paste the CSS block above, and click Publish. If you use a block theme without the Customizer, go to Appearance → Editor → Styles → Additional CSS instead. That’s it — the styles are now waiting for the button.
Divi: go to Divi → Theme Options → Integration and paste the HTML snippet into the “Add code to the < body >” box. Divi outputs it on every page automatically.
Block themes (Twenty Twenty-Four, Twenty Twenty-Five, etc.): open Appearance → Editor → Patterns → Footer, edit your footer template part, and add a Custom HTML block containing the snippet. Because the bar uses position: fixed, it will float at the bottom of the screen no matter where the block technically sits.
Any other theme: a small code-snippets plugin (such as WPCode) can inject the HTML site-wide via its “footer” location — useful if you’d rather not touch theme files. Whichever route you choose, the snippet should appear once per page, not once per section.
The button is only half the journey — where it lands matters just as much. The best destination is a dedicated booking page with exactly one job: your online scheduler (SimplePractice, TherapyNotes, or similar client-portal links work beautifully) or a short, minimal contact form. Keep that page free of distractions: no sidebar, no long biography, just a sentence of reassurance (“Reaching out is the hardest step — I’ll reply within one business day”) and the scheduler or form itself.
Two cautions worth repeating for practice owners. First, if the button opens a contact form, make sure the form is set up with client privacy in mind — minimal fields and a HIPAA-appropriate form tool if you’re a covered provider (we’ve written a full guide to HIPAA-friendly contact forms on this blog). Second, resist the urge to make the button open a phone dialer by default; many anxious first-time clients would rather do anything than make a live call. Offering the online route first tends to win more of them.
First, check your colors. The sage green in the snippet (#4c7c74 on white) passes WCAG contrast guidelines, but if you swap in your brand color, run it through a free contrast checker — a beautiful pastel button that fails contrast quietly excludes low-vision visitors. Second, leave the animation out. The button doesn’t need to bounce, pulse, or slide in; on a mental-health site, stillness is the brand. Third, test it on your own phone: scroll a long page, check that the bar never covers text you’re reading, and tap the button with one thumb. If it feels easy and unhurried, you’ve got it right.
That’s the whole project. One small bar, fifteen minutes, and from now on every visitor who reaches their “okay, I’m ready” moment — wherever it happens on the page — finds the door already open.
Not if it’s designed calmly. A single, soft-colored bar at the bottom of the screen reads as helpful, not pushy — it’s the same pattern used by booking apps people use every day. Avoid animation, urgency language, and pop-up behavior, and keep it to one button. The snippet in this guide also hides the bar on desktop, where your header button is already visible.
No. The button is a few lines of HTML and CSS. The CSS goes in Appearance → Customize → Additional CSS, and the HTML goes in your footer — via Divi’s Integration tab, a Custom HTML block in a block theme’s footer template, or a code-snippets plugin if you prefer not to touch theme files.
A dedicated booking page with one job: your online scheduler (such as a SimplePractice or TherapyNotes client portal link) or a short, privacy-conscious contact form. Remove distractions from that page and add one reassuring sentence about what happens next. If you’re a HIPAA-covered provider, make sure any form on that page uses a HIPAA-appropriate form tool.
Yes. The snippet is theme-agnostic — it uses position: fixed, so it floats above your layout no matter which theme builds the page. Divi, Astra, Kadence, and block themes all work; only the place where you paste the HTML differs. If your theme already adds bottom padding or its own mobile bar, adjust the body padding value so nothing overlaps.
Offer the online route first. Many first-time therapy clients find a live phone call intimidating, and a scheduler or short form lets them reach out at 11 p.m. when the decision actually happens. You can always list your phone number on the booking page as a second option for people who prefer to call.
