How to add a booking widget to your salon website
Your salon website looks the part — photos, a price list, a friendly bio. Then a visitor decides they want an appointment, and the trail goes cold. There's a phone number and maybe a contact form, so they close the tab, tell themselves they'll call later, and never do. The gap between wanting to book and being able to book is where your website quietly loses clients.
This guide is about closing that gap on your own site — not on Instagram, not on Google, but on the pages you control. The goal is simple: a visitor should be able to go from reading about a service to holding a confirmed appointment without ever leaving your website.
Button, widget, or full page
Booking can live on your site in three ways, and it pays to know the difference before you start pasting code.
- A booking button (or link). The lightest option. A "Book now" button that opens your online booking in a new tab or a pop-up. Nothing to maintain on your side; the booking system does the work.
- An embedded widget. The booking calendar lives inside your page — visitors pick a service and a time without ever leaving it. It feels seamless, as if booking were part of your site.
- A dedicated booking page. A full page hosted by your booking system. You link to it from everywhere and it's always up to date.
Most salons start with a button and add a widget on key pages later. If you haven't set up the underlying booking yet, work through the guide to setting up online booking first — the button is only as good as the calendar behind it.
Where to place the "Book" button (and why)
One button on the contact page isn't enough. A visitor should never have to scroll or search for how to book. Put the call to action everywhere a decision gets made.
| Placement | Why it works |
|---|---|
| Header / navigation | Visible on every page, so booking is one tap away no matter where someone landed. |
| Hero (top of the homepage) | Catches the ready-to-book visitor above the fold, before any scrolling. |
| Next to every service | The moment someone reads a price and likes it is the moment they act. |
| Sticky mobile bar | A fixed "Book" bar at the bottom of the screen follows the thumb on phones. |
| Footer | Catches readers who scrolled to the end and are still deciding. |
| Contact / about page | People who check who you are often decide right there. |
On a page dedicated to a single treatment — a service landing page — the button matters most, because the reader has already shown intent. And next to your price list, a booking button turns "how much is it?" into "let's book it." If you're weighing features and plans for a booking tool, the pricing overview shows what each tier includes.
Make it look like your salon
The button and widget should carry your site's colours and fonts so they feel like part of it, not a bolted-on stranger. Instead of a generic "Submit," write "Book my appointment." A consistent look reassures the visitor that they haven't been dropped onto a random third-party page and are still with you. A tidy, on-brand website is the whole point; for everything else it needs, see what your salon website needs.
Get mobile right
Most people find you on a phone, so booking has to be flawless on a small screen.
- A sticky "Book" bar that stays visible as people scroll.
- Big tap targets, so a thumb doesn't have to hit a tiny link.
- No zooming or sideways scrolling, and a fast load.
- The widget and the booking page must be built mobile-first, not shrunk down from desktop.
Test the whole flow before you trust it
Book a real test appointment from a phone that isn't yours and walk the whole path with a client's eyes.
- Does a confirmation arrive by email or SMS?
- Does the booking show up in your booking system calendar?
- Does a reminder fire, and do cancel and reschedule work?
Do this after every website change — a new template or a moved button can quietly break the flow.
Track where bookings come from
Add UTM parameters to the link and connect analytics so you know your website is pulling its weight. Tag the website button distinctly, compare it against bookings from Instagram and from your Google profile, and find out which pages actually convert. Once you measure, you stop guessing and reinforce what fills the calendar.
Keep availability in sync
Your website, Instagram, Google and walk-ins all have to draw from one calendar in real time. When website booking has its own separate schedule, sooner or later you'll fill one slot twice. A single source of truth is the quiet foundation everything else rests on.
Common mistakes to avoid
- Linking to your homepage instead of straight to booking.
- Hiding the button below the fold where no one scrolls.
- A contact form or "request" instead of instant booking.
- A PDF price list you can't act on.
- No sticky button on mobile.
- A calendar that isn't synced, so you get double bookings.
The fastest way to start is to create a free YourSalon account, grab your booking link and widget code, and drop them onto your site today.
Frequently asked questions
Try YourSalon for free
Online booking, automatic reminders and a POS in one place.
Start for freeYou might also like
How to set up online booking for your salon, step by step
A practical guide to launching online booking — from services and staff through deposits and reminders to embedding on your site and going live.
Salon website essentials
A practical checklist of the elements that turn a salon website into a booking machine — from the book button to reviews and mobile speed.
How to add a booking link to Instagram, Facebook and Google
A practical guide to adding a booking link and button across social media and Google so your followers become booked clients.
Account before booking, or guest checkout? What's better for your clients
Forced registration quietly costs you bookings. Here's why guest checkout wins for new clients, when a light account helps, and how to audit your own flow.
Booking analytics: what to track and how to act on it
Your booking system already has the data. Eight calendar metrics, how to read each and one concrete decision it drives — plus a table and a worked occupancy example.
‘Something went wrong’ isn’t enough: error messages that save a booking
A ready-to-use library of the booking errors salons hit most — bad message, good message and the recovery action — so an error saves the booking instead of losing it.
Continue reading
AI wrote it in a minute. Why that still isn't expert salon content
A language model produces text that looks expert without being expert. Here's the gap — experience, verification, a named author — and a checklist to turn any AI draft into genuine salon expertise.
Cancellation terms clients actually understand: plain-language rewrite patterns
Before-and-after rewrites that turn contract-speak cancellation terms into clauses a client understands on the first read — plus a template, a table and a checklist.
What client data a salon actually needs — and what to stop collecting
A practical, field-by-field audit of the salon client record — name, phone, birthday, address, notes, photos, health flags — with a clear keep-or-drop verdict and a retention rule for each.
When a deposit protects your salon — and when it just costs you bookings
Deposits are neither good nor bad — it depends where you point them. A decision matrix by service value, duration, client history and demand, with a sizing table and a checklist.