How do I add Square Appointments to my Wix site?

1. Publish your Square booking site first

Square’s help page, which I read in September 2026, says you get the link and the code after you’ve published your online booking site. In the Square Dashboard:

1. Click Appointments, or Payments, then Appointments.
2. Click Online Booking, then Channels.
3. Switch on Enable online booking.
4. Under Booking channels, click Preview & edit next to Square Online website, set up the booking site, and click Publish.

Square says the online booking site can be your whole website or something you link to from an existing one. This page is about the second case.

2. Get the link or the code

In the Square Dashboard, click Appointments, then Online Booking, then Channels. Under Add your booking flow to an existing site, click Get Started. There are three choices.

Get URL. Select your location if you have more than one, select your booking type, and copy the booking flow URL. This is the one for a Wix button.

Create button. Select your location, customize the button’s color, text, shape and font, and copy the HTML code. Square says it’s for a website or an email.

Get embed code. Select your location and copy the HTML code. Square says clients will be taken to a flow in another tab or window, so the booking itself happens on Square’s site.

3a. The URL, on a Wix button

These steps are from Wix’s help center, read in September 2026.

1. Click the button in your editor.
2. Click the Link icon.
3. Choose Web address.
4. Paste the booking flow URL, choose whether it opens in a new window, and click Done.

Wix says to test it in Preview mode afterward.

3b. Square’s code, in Wix’s Embed HTML element

1. In the editor, click Add Elements on the left.
2. Click Embed Code, then Popular Embeds, then Embed HTML.
3. Click the element on your page, click Enter Code, paste Square’s code under Add your code here, and click Apply.

Wix says the HTML element is an iframe, so what’s inside won’t be responsive, and that content with a fixed pixel size can be cropped if the frame is smaller. Its suggestion is to change fixed widths and heights in the snippet to 100 percent. Wix also says it can’t support code it didn’t create, so if the embed misbehaves, Square is who you ask.

Since Square’s own button is a link that opens the booking flow elsewhere, I’d use a Wix button with the URL. It matches the rest of your site’s buttons, and there’s no frame to size.

A widget for one service or one stylist

Square calls these advanced widgets. In the Square Dashboard:

1. Click Appointments, then Online Booking, then Advanced widget.
2. Select your location if you have more than one, and click Create New Widget for Location.
3. Name it, choose the staff and services to include, and save.
4. Copy the widget’s embed code and paste it into an Embed HTML element.

Square says a staff member who doesn’t have a selected service assigned won’t show that service, and that all service variations are shown. It also says edits to a widget update automatically wherever it’s installed, and that deleting a widget in the Dashboard doesn’t remove it from your site. The old code shows an error message instead, so take it out.

On a page about one treatment, a widget limited to that treatment is the one I’d use. SEO for estheticians covers why a page per treatment is worth having.

Instagram and Google

Square has its own steps for a Book Now button on Instagram and Facebook, and they’re in adding Square Appointments to Instagram. For Google, adding a booking link to your Google Business Profile has Google’s steps, and Square has its own Reserve with Google setup in its help center.

Adding booking to a Wix website covers the Wix side in general, and the Squarespace version of this page exists if you’re weighing the two.

I build on Squarespace. If you’d rather have the site built with booking wired in, that’s The Full Bloom, $1,000, once, and the audit on the home page is free.