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?