You can embed a Square Appointments booking widget or button on your existing website, making it easy for your clients to find your availability and book an appointment.
We know the embed process can be confusing, so we put together a how-to guide for some common website builders - Squarespace, Wix, Weebly, and Wordpress. Keep in mind that our community admins and support team can’t help troubleshoot non-Square products, since we’re not the experts! If you’re having any trouble with your website management system, you’ll have to reach out to them directly, or ask fellow sellers here in the community.
Let’s get to it!
- Get your embed code from the Square Dashboard
- Embed with Squarespace
- Embed with Wix
- Embed with Weebly
- Embed with WordPress
The first thing you’ll need is the code for your Square Appointments widget, available from the Square dashboard.
To get your embed code from your Square dashboard:
- Visit the Online Booking tab of your Appointments dashboard > click Website Embed.
- Copy the block of code provided.
- In your website builder, you’ll paste this block of code and then preview and publish.
To embed the widget on your Squarespace website:
- From your Squarespace Pages menu, select or create the page where you’d like to embed your booking widget.
- Click on the area of the page where you’d like the widget embedded and click Add Block.
- Select the Code < / > icon.
- Remove default code from text box and paste the code provided in your Appointments dashboard > click Apply.
- Click Save. Once you exit editing mode and refresh the page, the embedded widget will display.
Read more about Using the Code Block on the Squarespace.
To embed the widget on your Wix website:
- From your Wix site Editor, click the + Add icon from the menu on the left-hand side.
- Then click More and click HTML iframe.
- Drag and drop and resize the embed box to position it as you’d like it to appear on your site.
- Click Enter Code.
- In the HTML iFrame pop up box (see the screenshot above), paste the full embed code from your Square Appointments dashboard.
- Click Apply > and finally click Publish to publish the changes to your site.
Read more about adding HTML code with Wix.
To embed the widget on your Weebly website:
- From your Weebly site editor, click and drag the embed code button from the toolbar into the desired section of your page.
- Resize margins as needed.
- Click within margin to set custom HTML > click Edit Custom HTML.
- Paste embed code > click outside of embed box to set changes.
- Click “Publish”.
Note: embed code won’t take up the entire page as previewed. Consider resizing it accordingly after publishing and refreshing the page.
Read more about creating widgets and embedding code with Weebly.
To embed the widget on your WordPress website:
- Select/create page where you’d like to embed your booking widget.
- Click the HTML tab in the page editor > paste code provided in your Appointments dashboard.
- Click Preview or Publish.
Read more about HTML with Wordpress.
We hope this makes embedding your appointments widget a little easier. Feel free to comment here to let us know how it’s going!
You can embed a Square Appointments booking widget or button on your existing website, making it easy for your clients to find your availability and book an appointment.
We know the embed process can be confusing, so we put together a how-to guide for some common website builders - Squarespace, Wix, Weebly, and Wordpress. Keep in mind that our community admins and support team can’t help troubleshoot non-Square products, since we’re not the experts! If you’re having any trouble with your website management system, you’ll have to reach out to them directly, or ask fellow sellers here in the community.
Let’s get to it!
- Get your embed code from the Square Dashboard
- Embed with Squarespace
- Embed with Wix
- Embed with Weebly
- Embed with WordPress
The first thing you’ll need is the code for your Square Appointments widget, available from the Square dashboard.
To get your embed code from your Square dashboard:
- Visit the Online Booking tab of your Appointments dashboard > click Website Embed.
- Copy the block of code provided.
- In your website builder, you’ll paste this block of code and then preview and publish.
To embed the widget on your Squarespace website:
- From your Squarespace Pages menu, select or create the page where you’d like to embed your booking widget.
- Click on the area of the page where you’d like the widget embedded and click Add Block.
- Select the Code < / > icon.
- Remove default code from text box and paste the code provided in your Appointments dashboard > click Apply.
- Click Save. Once you exit editing mode and refresh the page, the embedded widget will display.
Read more about Using the Code Block on the Squarespace.
To embed the widget on your Wix website:
- From your Wix site Editor, click the + Add icon from the menu on the left-hand side.
- Then click More and click HTML iframe.
- Drag and drop and resize the embed box to position it as you’d like it to appear on your site.
- Click Enter Code.
- In the HTML iFrame pop up box (see the screenshot above), paste the full embed code from your Square Appointments dashboard.
- Click Apply > and finally click Publish to publish the changes to your site.
Read more about adding HTML code with Wix.
To embed the widget on your Weebly website:
- From your Weebly site editor, click and drag the embed code button from the toolbar into the desired section of your page.
- Resize margins as needed.
- Click within margin to set custom HTML > click Edit Custom HTML.
- Paste embed code > click outside of embed box to set changes.
- Click “Publish”.
Note: embed code won’t take up the entire page as previewed. Consider resizing it accordingly after publishing and refreshing the page.
Read more about creating widgets and embedding code with Weebly.
To embed the widget on your WordPress website:
- Select/create page where you’d like to embed your booking widget.
- Click the HTML tab in the page editor > paste code provided in your Appointments dashboard.
- Click Preview or Publish.
Read more about HTML with Wordpress.
We hope this makes embedding your appointments widget a little easier. Feel free to comment here to let us know how it’s going!
Hi @jackfrost, @bylaufi and @phyn!
Thanks for reaching out to the Community about this.
Following a recent discussion with another Seller here on the Community, I reached out to our Appointments team for further clarity. Unfortunately they did confirm that this is expected behaviour, and the related US Support Centre article has now been updated to reflect the most up to date information.
I've also requested that the support centre articles for the other countries we support be updated.
I think the Square Widget is not the most comfortable for the scheduling system.
Firstly because I can't adapt it to the sizes of my website or the colors so that it doesn't break the corporate image of the business.
Second, the fact that the product list is fully displayed and not grouped by category makes the widget too long.
Thirdly it should be more compact, from the same screen choose service and staff. then calendar. then the customer data, giving the option to make the agenda without registration and leave the possibility to do it if you like. and payment.
In addition to each section allow you to place the necessary legends, such as telling the customer that you are booking a service and the total cost is x but you must cancel 50% to make the reservation.
This way it is much easier for the client to schedule with comfort.
It is also important to add custom fields in the customer data collection area.
Name
Last name
Phone
Email
Date of birth
Notes
among other fields you may need.
Giving an example if you are allergic to any medication for saying something.
