How to add a booking calendar or Book now button to your website (Wix, Squarespace, WordPress)

You already have a website. Maybe it's a Wix site a friend set up, a Squarespace page with your best work on it, or a WordPress site you've had for years. People find it, like what they see, and then hit the same wall: to book, they have to DM you, call, or tap through to another app.

Every extra step loses a few of them. The fix is to let people book right there, on your own site.

This guide is for people who take appointments: barbers, salons, lash and nail techs, tattoo artists, trainers, tutors and groomers. It covers what a good booking setup needs, where the button goes, which style to use, and how to add one on Wix, Squarespace and WordPress. At the end we show how to do it with Utilica.

What does a good booking setup on a website need?

Before you pick a tool, know what you want it to do. A booking calendar on your website should give a client everything they need to commit without messaging you first:

1. Real open times. Only the times you can actually do, worked out from your hours and the length of each service, so nobody books a 90-minute color into a 30-minute gap.
2. Your services, with prices and lengths. "Fade, 45 min, $40" answers the two questions people would otherwise text you.
3. A choice of person, if there's more than one of you. A shop with three barbers needs clients to pick who they're booking with, or pick "anyone".
4. A deposit, if you take one. Paid at the moment they book, not chased later.
5. Your policy, before they press Book. Cancellations, lateness, what the deposit covers.
6. A confirmation and a reminder. An email straight away with the details, and another before the appointment.
7. It works on a phone. Plenty of people will book from their phone, often straight from your Instagram bio.

If a client can see the price, pick a time and pay the deposit in one go, they're booked and paid up front, and you never had to reply to a message.

Where should the Book now button go on your website?

Put it where people decide. That's usually in more than one place:

• At the top of your home page, next to your name or logo. People who already know you came to book, so don't make them scroll.
• Under each service or price list. Someone reading about your lash lift is ready right then. A button that opens booking on that exact service saves them a step.
• On your contact page. People go there looking for a way to book.
• In the corner of every page, as a small floating button, if your site is more than a page or two.

Use the same words every time: "Book now" or "Book an appointment". A button that says "Learn more" on one page and "Get started" on another makes people wonder whether it's the same thing.

Booking button, side panel or calendar on the page: which should you use?

A booking widget can sit on your site in a few ways. Here's when each one fits.

If you're not sure, start with a popup button at the top of the page and a calendar on its own "Book" page. That covers people who want to book fast and people who want to look around first.

Should you take a deposit when clients book online?

For most appointment businesses, yes. A deposit means the time is theirs and part of the price is already with you.

A few things that make deposits go smoothly:

• Keep it simple. A fixed amount, like $20, or a share of the price, like 25%.
• Say what's left. "$20 now, $60 at your appointment" leaves nothing to guess.
• Say what happens if they cancel. How much notice gets the deposit back, and what happens after that.
• Take it at the moment they book. A deposit you ask for later by text is a deposit you'll be chasing.

If you'd like help with the wording, we wrote a whole guide on how to ask a customer for a deposit.

Common mistakes when adding booking to a website

• Hiding the button. One small link in the footer isn't enough. Put it at the top, and next to every service.
• Showing times you can't do. If your calendar says Tuesday at 9 is free and it isn't, you'll be the one sending the awkward message.
• No price until the end. People who find out the price after they've picked a time feel tricked, and many leave.
• Never checking it on a phone. Open your own site on your phone and book something. If it's fiddly for you, it's fiddly for them.
• Pasting the code and never testing it. Some site builders hide code while you're logged in, or only run it on certain plans. Always check your live site, logged out.

How do I add a booking calendar to my website?

There are two ways, and they work on almost any site.

1. A link. Your booking page has its own address. Add a button on your site, set it to that link, and you're done. It works on every website builder and every plan, free ones included. The downside is that people leave your site to book.

2. An embed code. Your booking tool gives you a short piece of code. You paste it into your site, and the button, side panel or calendar appears on your own page. People book without leaving. This is what most people mean by "embed a booking calendar".

To paste embed code, every site builder has some kind of code or HTML block. Here's where it lives on the most common ones, and the limits each builder sets.

Wix

Wix calls it an embed. From the Wix help center:

1. Open your site in the editor and click Add Elements.
2. Click Embed Code, then Popular Embeds, then Embed HTML.
3. Click the new element on your page, click Enter Code, and paste your code.
4. Click Apply.

Wix shows this code inside its own box on the page, so a calendar placed in the page is the style that fits it best. Drag the box to be tall enough for your calendar.

For a popup or a floating button that works on every page, Wix has a separate place: Settings in your site's dashboard, then Custom Code, then Add Custom Code. You can choose all pages and where the code goes (the end of the body suits a booking button). Wix says your site needs to be published and have a connected domain before you can use it.

Wix has its own booking app, Wix Bookings. If you're looking for a Wix Bookings alternative because your booking already lives somewhere else, or you want the same booking on your site and your link in bio, an embed is how you bring it in.

Squarespace

Squarespace calls it a code block:

1. Edit the page and hover over the section where you want booking.
2. Click Add block (or +), then Code.
3. Click the pencil icon on the block, leave the mode set to HTML, and paste your code.

Two things to know. Squarespace says code blocks only run JavaScript and iframes on its Core, Plus and Advanced plans (and some older plans), and most booking widgets need JavaScript. And code sometimes doesn't show while you're logged in, even though visitors see it. Log out, or use preview, to check.

Squarespace also has its own scheduling tool, Acuity Scheduling. To use a booking tool you already have, the code block is how you bring it in.

WordPress

On a WordPress site you run yourself, signed in as an administrator:

1. Edit the page and click + to add a block.
2. Search for Custom HTML and add it.
3. Paste your code, then click Preview to check it, and Update to save.

For a floating button on every page, paste the code into a Custom HTML block in your site's footer instead, so it loads everywhere.

On WordPress.com, it depends on your plan. WordPress.com says JavaScript only works on sites with a plan that allows plugins, once hosting features are switched on. On other plans, scripts in a Custom HTML block won't run, so use a plain link to your booking page instead.

Looking for a free WordPress appointment booking plugin instead? Plugins can work well, but they run on your own site, so updates and payments are yours to look after. An embed keeps all of that off your site.

Any other website

Webflow, Shopify, a site someone built by hand: look for a block called Embed, Custom code, Custom HTML or Custom Liquid, and paste the code there. For a button on every page, look for a footer code setting in the site settings. If your builder doesn't allow code at all, use a link.

Adding a Book now button with Utilica

Utilica gives you a booking page with your services, prices, open times, deposits and reminders. On Pro and Business you can also put it on the website you already have, as a Book now button, a side panel, a floating button, or the calendar right in your page. Clients pick a service, a person and a time, pay any deposit right there, and every booking lands in Bookings next to the ones from your link in bio.

FeatureYour form, checkout or booking, on the site you already have.Paste one snippet and a form, your storefront with its checkout, or a Book now button appears inside your own website: in the page, as a popup or a slider.utilica.app/features/embeds→

Here's how to set it up.

1. Set up booking, if you haven't. Add your services with their prices and lengths, your hours, and your deposit. Publish your page.
2. Go to Bookings, then On your website. You'll find the tab at the top of Bookings once booking is set up. On the main Bookings screen, there's also a "Have a website? Add a Book now button" link under Your booking page.
3. Pick a style. The tabs are Inline (the calendar in the page), Popup, Slider (the side panel), Floating button and Full page. It opens on Popup, because a Book now button is what most people want.
4. Make the button yours. Change the button text (it starts as "Book now"), pick a button color to match your site, and for the side panel and floating button, choose the left or right side.
5. Open it on one service or one person, if you like. If you have more than one service, "Open on" lets you pick one, or leave it on "Every service". If more than one person takes bookings, "Book with" lets you pick one, or "Anyone".
6. Copy the code under "Paste this where you want it".
7. Paste it into your site. Under "Where does your site live?", pick Wix, Squarespace, WordPress, Webflow, Shopify or "Any website" for the steps for that builder.

The code is two lines and looks like this:

<div data-utilica="booking" data-id="yourname" data-mode="popup" data-text="Book now"></div>
<script src="https://utilica.app/embed.js" async></script>

There's a live preview next to the code, on desktop or phone size, so you can see the real thing on a stand-in page before you paste anything. Times booked in the preview are real bookings, so cancel any you make while trying it.

One button for each service

This is where opening on one service pays off. Under your "Gel manicure" section, paste a button that opens straight on gel manicures. Under "Beard trim", one for beard trims. A client reading about a service taps once and sees open times for that service, nothing else to pick.

The same works for people. A salon can put a "Book with Maya" button on Maya's bio and a "Book with Jordan" button on Jordan's, while the main Book now button at the top lets clients choose.

Already have a button you like?

If your site already has a styled Book now button, you don't need ours. Put the same data attributes from the code onto your own button or link, keep the script line on the page, and your button will open booking when it's clicked.

Deposits, paid right there

If a service asks for a deposit, the client pays it inside the same window, on your site, without being sent anywhere. Deposits can be a fixed amount or a share of the price, paid by Cash App, Venmo, PayPal or Zelle with the amount filled in, or by card if you've connected one. You choose how long an unpaid time is held, and if the deposit doesn't come in, the time opens up again by itself.

FeatureBooked, and paid up front.Take a deposit when a client books, hold the time until it is paid, and email a reminder before they come. The deposit is paid in Cash App, Venmo, PayPal or Zelle with the amount filled in, and we take no fee on it.utilica.app/features/deposits→

Bookings with nothing to pay up front get a "You're booked" note with the service and time, right in the same window. Clients who give their email get the details by email, and a reminder before they come.

Every booking from your website shows up in Bookings, in the same list as bookings from your link in bio and anywhere else you share your booking link. No second calendar to keep in step.

For developers

If you or your web person write code, there's more under "For developers" on the same screen. You can open booking from your own code with Utilica.open, open it on a service or a person, and listen for a booking.created event when someone books. The event never includes the client's private booking link.

Is there a free way to add booking to a website?

Yes: a link. Your Utilica booking page, with deposits, held times and reminder emails, is on every plan, including Free. Set any button on your website to your booking link and clients can book and pay from there. It's on the Link tab of the same screen, next to a QR code.

The booking button, side panel and calendar on your own site come with Pro, at $7.99 a month, and Business, at $29 a month. See pricing for everything else each plan includes. If you ever move back to Free, an embed on your site shows a "Book in a new tab" link instead of the calendar, so clients can still reach you.

Will a booking widget slow down my website?

It shouldn't. Utilica's booking embed loads after your page, so it never holds your site up. It draws inside its own sandboxed frame, which means your site's styles can't break it and it can't touch anything on your site.

Who is this for?

Anyone who books appointments and already has a site:

• Barbers who want a Book now button at the top of the shop's site, and one per barber.
• Salons with a service menu, where each section opens on its own service.
• Nail techs and lash techs who take a deposit on every set.
• Tattoo artists who want consults booked from their portfolio site.
• Personal trainers and tutors with sessions of different lengths.
• Dog groomers who want clients to see prices and times before they call.

If you're comparing tools, we've also written up how Utilica compares with Calendly, Square Appointments and Booksy.

The short version

Let people book where they already are. Put a Book now button at the top of your site and next to each service, show real times and real prices, and take the deposit at the moment they book. On Wix, Squarespace or WordPress, that's one piece of code pasted into an embed or HTML block. With Utilica it's under Bookings, On your website, and every booking lands in the same place, booked and paid up front.