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!

[PTS]

I had a similar issue and in my case I have word fence (WF) installed on my site. To resolve the error i followed the guide at the following link: https://cherry.host/help/2018/10/03/403-error-when-updating-in-elementor-html-module/

[LaRevive]

Why do I need to update the code every couple weeks?  I have embedded the code in my Wix website, and it generally works great.  However, every few weeks I learn that my booking website is "down" from a customer kind enough to call.  Then I have to come back here, copy the code, and update the code on my website in order for the widget to actually work.  Is there some reason why I need to do this?  Is there a way to get a notice whenever you decide to change the code so I will know when my appointment widget stops working/needs updated code?

[Nicole_N]

Are we still unable to customize the look of this widget?

[mercesgirl]

I added the code for embedding appointments onto a site, and it is adding a button instead of embedding the page.

http://fingerlakesmassage.com/scheduling/

[hydrabot]

Any help will be appreciated! 
https://www.evernote.com/l/ACj8CUrhFA5GYZfUNsrTDETpJStqDrLlRKg

The embed widget is only displaying a very very small portion of the menu on desktop. How does this get expanded? Thank you!

[AroundTownDoors]

Same problem with my site.  How do we expand the Booking Area once a service/product has been activated?

ie:

Once a customer clicks on an item to book.  The calendar will appear for booking but then it is cut off due to the height, not auto-expanding.   And in the process, a scroll bar will appear. 

[solomonrodgers]

In my wordpress, it embeds a linked button not the actual page... What do you have to do to actually make it work like your screenshot examples? When you click the button it looks like you just go to the square booking site, it looks nothing like the rest of my site. 

[sunrisevineyard]

The Weebly editor on this page looks, of course, nothing at all like the actual Weebly webpage editor. In the current Weebly website editor, there is no place at all to add embedded code. 

[ashc]

Hey @sunrisevineyard,

This is actually a pretty old thread and the section for Weebly's is going to be outdated since we're directly integrated with them now.

Their interface has changed a lot since then too. 

When editing your Weebly site, you can choose to Add a Section from the left hand side of the editing screen. You'll see a tab under "Media" that says Embed code. That's the place where you'll input your Appointments code (That code is found under the Website Embed tab through the Square Dashboard.)

[A1_Fishing]

Hi, is there a way to customise the widget with CSS or in Square itself, so that the booking flow doesn't show the sign in link, doesn't show the company name and takes up the whole page (rather than being in a small container that you have to scroll down).  Re the 3rd point, I have tried increasing the columns margin that I have added the widget to, but that didn't work.  Thanks.

[GreatVibes]

I am looking for the same answers as well. Can we have the widget match our website design? or that we can adjust it to fit our website? the widget sticks out like a sore thumb.. My webpage is black and the widget is white, I can go on... How about listing the services by category instead of a long list of services. It also only opens in a small rectangular window, can it take up the whole page? Please help. 

[nika]

@GreatVibes I can share this feedback with our Square Online Product Team for potential future developments. This is the type of feedback we like to hear to help with enhancements down the line.

[SeanoDriving]

Just wondering after all this time whether there have been any development updates to the widget in regard to the above? i.e. making it resize rather than having scrollbars? (Adding the CSS that @ChanelP mentions pushes the Continue button away down the page).

[ChanelP]

I came across this link on wordpress and it really helped:

https://wordpress.org/support/topic/adjusting-square-appointments-widget-height/

RavenousRavenDesign posted the following code to add to the customizer:

iframe{

max-width: 100%;

min-height: 100px;

height: 1200px !important;

vertical-align: top;

min-height: 1200px !important;

}

I haven't been able to figure out how to hide the header area where the sign in link is, but if I do I will come back and update. After 4 years you would think the developers at square could get around to fixing this issue 😕

[ContentmentSpa]

Please create an embed widget that is a calendar and not a button.

[LarraM]

I am trying to embed the code you have for online booking onto my Wordpress website and this is what happens https://d.pr/i/N8pplZ

[sayra]

Hey @LarraM - When grabbing your code are you heading to your Square Online Dashboard > Appointments > Website Embed > ADD CODE TO YOUR WEBSITE? If this is not working, I would reach out to WordPress for additional assistance. There may be something else you need to do on their end. 

[coaching]

Can I embed on an existing godaddy website?

[Valentina]

Hi hi @coaching - and welcome to the Seller Community! 

Looks like GoDaddy has a page where they cover this topic 😊

[JenDecker]

Appears that this "embed" code only puts a rather ugly blue button onto  our website. It doesn't embed a scheduler. Not accurate representation of its function and the booking button is the same thing! 

[Arie]

Hey @JenDecker,

Thanks for writing in! Welcome to our community 👋

Hmm, this is odd as you should be able to view the widget on tablets and desktop computers. On a mobile phone, the Booking Button would automatically be displayed instead. Please reach out to our CS team, who'll be able to look into this further with you!