Adding a booking widget to your website
You have a nice website with your phone number and opening hours on it — and clients still call while you're mid-cut. A clear Book Now button that opens a real booking form solves that. Visitors pick a service and a time slot themselves, whenever it suits them, and you never have to call back.
This guide walks through how to actually get a booking widget onto your own website, where to place it, and what to avoid, so a passive brochure turns into a tool that fills your calendar.
Why a plain contact form isn't enough
A generic message us and we'll get back to you form creates a pointless loop. The client sends a message, waits for a reply, you have to call back, agree on a time and write it down by hand. Every step is a place where the booking quietly dies.
Online booking collapses that into a single action: the client sees your real-time availability and books the slot themselves. No callbacks, no double entry. If you're still figuring out how the whole thing should work, start with the basics of a salon booking system.
Three ways to get the widget on your site
Depending on how your website was built, you essentially have three routes:
- A link button — the simplest option. You add a Book Now button that links to your booking page. It works absolutely everywhere, even from an Instagram bio.
- An embedded widget (iframe) — the form appears directly on your site and the client never leaves. You paste a short snippet of code onto the page where you want it.
- A popup overlay — a button opens the form in an overlay window. Handy when you don't want to change the page layout.
For most salons the best mix is both: a prominent button in the site header plus an embedded widget on a dedicated Booking page.
Where to place the button
Placement matters more than it looks. Battle-tested rules:
- In the site header, so it's visible from every page without scrolling.
- Right in the hero banner on the homepage, next to your salon name.
- At the end of every service description — the client is reading about your balayage, so it's the perfect moment to book.
- As a sticky button on mobile, pinned to the bottom of the screen so it stays in view.
The button should stand out in colour from the rest of the site and use unambiguous wording: Book an appointment beats a vague Learn more.
What the widget must do
For the form to actually fill your calendar rather than just decorate the page:
- Real availability — the client only sees slots that are genuinely free.
- Service and duration selection, so the system blocks the right amount of time.
- Choice of a specific staff member, if the client has a favourite stylist.
- Automatic confirmation and reminder, which quietly cut missed appointments — more in the guide on how to reduce no-shows in your salon.
- Mobile-friendly behaviour, because most bookings arrive from a phone.
Common mistakes
- Burying the button in the footer. If nobody finds it, it does nothing.
- Linking to an email instead of a form. That drags you back into manual scheduling.
- A form that breaks on mobile. Test it on your own phone.
- Too many fields. Name, phone, service, time — you don't need more for a first booking.
- No connection to your calendar, which creates double records and overlaps.
You'll find more typical missteps and how to dodge them in our roundup of the most common salon booking mistakes.
If you don't have a website yet
No website, or an old one? That's no barrier. You can share your booking page as a standalone link on Instagram, Google and WhatsApp, so bookings work even before you build a proper salon website. To compare exactly what each plan includes, see the pricing page.
A booking widget isn't a technical detail — it's the difference between a website that merely looks good and one that does work. The quickest way to try it is to create a free YourSalon account and generate your own button today. For the German market, see online booking for salons in Germany.
Running a salon in Austria? Then salon website in Austria goes deeper on this, with prices in euros and examples from Vienna, Graz, Linz, Salzburg and Innsbruck.
Frequently asked questions
Related guides and features
Try YourSalon for free
Online booking, automatic reminders and a POS in one place.
Start for freeYou might also like
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.
Online booking for salons in Germany: the complete guide
How salons in Germany introduce online booking: Google, website, booking widget, Instagram, confirmation, reminders, deposits, GDPR and mobile conversion.
Booksy vs your own booking system for a salon
A neutral marketplace-vs-own decision guide for a Polish salon — where clients come from, who owns the client base, commission vs subscription, payments, reviews and when each pays off.
A commission-free booking system for salons in Poland
When a commission-free booking system for salons in Poland genuinely pays off and when a flat plan is cheaper. Billing models, worked sums at 50, 100 and 300 visits, and a calculator table.
Commission-Free Booking System in Slovakia
What "commission-free" really means for a salon in Slovakia: the difference between booking, marketplace and payment commission, a fixed subscription and add-ons.
Salon software without commission in Germany: compare costs correctly
What "without commission" really means: the difference between booking, marketplace and payment commission, a fixed subscription and add-ons for salons in Germany.
Want to learn more about salon marketing and growth? Visit the YourSalon.eu Academy