Embed the Appointments Booking Widget on your Website

[Kpay]

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:

1. Visit the Online Booking tab of your Appointments dashboard > click Website Embed.
2. Copy the block of code provided.
3. In your website builder, you’ll paste this block of code and then preview and publish.

To embed the widget on your Squarespace website:

1. From your Squarespace Pages menu, select or create the page where you’d like to embed your booking widget. 
2. Click on the area of the page where you’d like the widget embedded and click Add Block.
3. Select the Code < / > icon. 
4. Remove default code from text box and paste the code provided in your Appointments dashboard > click Apply. 
5. 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:

1. From your Wix site Editor, click the + Add icon from the menu on the left-hand side.
2. Then click More and click HTML iframe. 
3. Drag and drop and resize the embed box to position it as you’d like it to appear on your site.
4. Click Enter Code. 
5. In the HTML iFrame pop up box (see the screenshot above), paste the full embed code from your Square Appointments dashboard.
6. 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:

1. From your Weebly site editor, click and drag the embed code button from the toolbar into the desired section of your page. 
2. Resize margins as needed.
3. Click within margin to set custom HTML > click Edit Custom HTML. 
4. Paste embed code > click outside of embed box to set changes.
5. 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:

1. Select/create page where you’d like to embed your booking widget.
2. Click the HTML tab in the page editor > paste code provided in your Appointments dashboard.
3. 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!

[#2]

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:

1. Visit the Online Booking tab of your Appointments dashboard > click Website Embed.
2. Copy the block of code provided.
3. In your website builder, you’ll paste this block of code and then preview and publish.

To embed the widget on your Squarespace website:

1. From your Squarespace Pages menu, select or create the page where you’d like to embed your booking widget. 
2. Click on the area of the page where you’d like the widget embedded and click Add Block.
3. Select the Code < / > icon. 
4. Remove default code from text box and paste the code provided in your Appointments dashboard > click Apply. 
5. 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:

1. From your Wix site Editor, click the + Add icon from the menu on the left-hand side.
2. Then click More and click HTML iframe. 
3. Drag and drop and resize the embed box to position it as you’d like it to appear on your site.
4. Click Enter Code. 
5. In the HTML iFrame pop up box (see the screenshot above), paste the full embed code from your Square Appointments dashboard.
6. 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:

1. From your Weebly site editor, click and drag the embed code button from the toolbar into the desired section of your page. 
2. Resize margins as needed.
3. Click within margin to set custom HTML > click Edit Custom HTML. 
4. Paste embed code > click outside of embed box to set changes.
5. 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:

1. Select/create page where you’d like to embed your booking widget.
2. Click the HTML tab in the page editor > paste code provided in your Appointments dashboard.
3. 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!

[DavidVanGo]

I have read through the comments below and most are quite old, it is now October of 2021.

The issue I am having is when I embed the code in Wordpress, the Square code results in taking over the editor. I know that Square has been aware of the issue for sometime now, and wondering if you have created a solution?

Dave in Toronto.

[BernadetteA]

Welcome to the Seller Community, @DavidVanGo

Can you clarify what you mean by "taking over the editor"? Does embedding the Square Appointments code prevent you from editing your website?

This may be something that needs to be looked at by Wordpress, but any additional information you can provide would be helpful. Thanks! 😊

[DavidVanGo]

Yes, it prevents me from further editing. Apparently, this is a common issue as there are many discussions on it over the web. In essence, I need to remove the Square code, continue editing my site, then, when fully edited, place the Square code back in. Quite ineffective. Are you aware of this issue?

[Starrman73]

I embedded the widget that says it is inline but it redirects as soon as you click the "book now" button?  Is there no way to keep it from redirecting and staying in the iFrame/embed?

[Kim17]

Hi,
I’ve successfully embedded the Square Appointments widget on my local website. However, I’ve noticed that whenever a specific service is selected, it opens in a new tab rather than staying within the same page.

This behavior disrupts the user experience and detracts from the seamless integration I was aiming for.

Could you please advise on how to resolve this issue? I’d like the booking process to remain contained within the embedded widget on my website without triggering a new tab.

Thank you in advance for your assistance. I look forward to your guidance on this matter.

Best regards,

[Sineaid]

Hi @Kim17,

Apologies, this query seems to have slipped through the net!

When it comes to embedding code on a 3rd party website, we are limited in the support we can provide. However, if you let the Community know who your site is hosted with, you may find that another Seller can help guide you.

Failing that, we’d normally recommend that you reach out to your web host for advice on customising the navigation UX.

For now, I’ve gone ahead and merged your post to an existing thread where other Sellers and Community moderators have discussed the nuances of adding the Appointments booking widget to 3rd party sites.

[jackfrost]

having a problem with embedded widget staying on my site. I have my own site it is not wordpress or anything i host it on aws myself. the widget iframe works and shows everything just fine. the problem is when a user selects a service to book it instantly goes to squareups site instead of staying on my site and working there.

kind of making it embed pretty pointless.

[bylaufi]

Did you ever find a solution for this? Like you, I want to keep the person on my site rather than have it open in SquareUp.

[phyn]

nope. anything i try it still jumps from my site and opens a new windows to squares page that it appears i can not modify to make look like it isn't some scam.

[Sineaid · Accepted solution]

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.