x
Alumni

Embed the Appointments Booking Widget on your Website

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!

 


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.

Dashboard embed code.jpeg

 

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.Squarespace0.jpeg
  3. Select the Code < / > icon. Squarespace1.jpeg
  4. Remove default code from text box and paste the code provided in your Appointments dashboard > click ApplySquarespace2.jpeg
  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 iframeScreenshot 2018-08-22 at 07.57.41.png
  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. Screenshot 2018-08-22 at 08.17.12.png
  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.  Wix3.jpeg

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. Weebly1.jpeg
  2. Resize margins as needed.
  3. Click within margin to set custom HTML > click Edit Custom HTMLWeebly2.jpeg
  4. Paste embed code > click outside of embed box to set changes.
  5. Click “Publish”. Weebly3.jpeg

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.Wordpress1.jpeg
  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!

165,751 Views
Message 1 of 66
Report
1 Verified Answer
Verified Answer

Embed the Appointments Booking Widget on your Website

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!

 


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.

Dashboard embed code.jpeg

 

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.Squarespace0.jpeg
  3. Select the Code < / > icon. Squarespace1.jpeg
  4. Remove default code from text box and paste the code provided in your Appointments dashboard > click ApplySquarespace2.jpeg
  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 iframeScreenshot 2018-08-22 at 07.57.41.png
  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. Screenshot 2018-08-22 at 08.17.12.png
  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.  Wix3.jpeg

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. Weebly1.jpeg
  2. Resize margins as needed.
  3. Click within margin to set custom HTML > click Edit Custom HTMLWeebly2.jpeg
  4. Paste embed code > click outside of embed box to set changes.
  5. Click “Publish”. Weebly3.jpeg

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.Wordpress1.jpeg
  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!

65 REPLIES 65

The same thing is happening to me. It is not working with wordpress at all it just shows the code. 

44,240 Views
Message 22 of 66
Report

The embed appears to be loading into an iframe that does not fully expand to the height of its contents. If I want to display the complete contents of the square widget, I have to manually force the iframe to expand to the height of its contents. This is pretty inconvenient and doesn't allow for easy integration into an existing design.

71,051 Views
Message 23 of 66
Report

<div style="width: 75%; height: 75%; margin: 50px auto; padding-top: 20px; padding bottom: 30px;"><!-- Start Square Appointments Embed Code -->
<script src="https://squareup.com/appointments/buyer/widget/34f0aebe-2df3-4e98-ae9e-ab6e3abe8794/06TKYA6G6CZ9Y.js...>
<!-- End Square Appointments EmbedCode --></div>

 

This tiny bit of code fixed the problem with the bottom disappearing. My margins reflect the design, so you may want to change them. 

 

Even when I fixed the spacing, the best decision was to use a button and go to square for booking my client. The problem I still have is that the font size is not behaving responsively on smaller screens from the embed. Is the widget font size supposed to be responsive? What did I miss? Please help. 

64,661 Views
Message 24 of 66
Report
Admin

I'm sorry for the delay @Leslie1! If you're still experiencing this issue, please go ahead and contact our Support team about this so we can investigate this for you! 

 

Thanks also for your helpful reply to the previous posts! 

️ Helen
Seller Community Manager

Did you find help in the Seller Community? Mark a Best Answer to help others.
55,523 Views
Message 25 of 66
Report

Embedding doesn't work on Squarespace. Can you please take a look at it?

40,294 Views
Message 26 of 66
Report
Admin

 

@hyuk1027 Sorry to hear that! We haven't heard reports of issues with Squarespace. If you're still having trouble embedding your booking widget please contact our Support team so we can take a closer look. 

️ Helen
Seller Community Manager

Did you find help in the Seller Community? Mark a Best Answer to help others.
27,127 Views
Message 27 of 66
Report

I copied and pasted the EMBED code, and this is how it looks when I preview my Wordpress page:

 

https://squareup.com/appointments/buyer/widget/3b296b3a-d8b8-4b40-b939-7ab25a7ff85e/AY8WSMJNDVDJT.js

 

Please help.

 

15,953 Views
Message 28 of 66
Report
Square Community Moderator

Oh wow,

 

@hollylac have you reached out to any Support Team yet?

 

You might need to reach out to Wordpress directly to get their insight on why this might be happening. 

 

It sounds like you're doing everything right on the Square side of things. 

15,698 Views
Message 29 of 66
Report

 Is there a way to put the html code in a button, on the Wix site? We use a book now button for our tours, and we just need a button to go to the square appointments page that we use.

13,988 Views
Message 30 of 66
Report

I am able to easily embed the code to create a button on my Weebly website.  However when I click to book an appointment using it, it takes me to an inactive location.  How can I correct this?

12,374 Views
Message 31 of 66
Report
Alumni

@ewllc - thanks for the post! When you get the embed code from your Square dashboard, make sure you're getting the code from the location that you'd like to point people to. You can select your location at the top of your dashboard: 

 

   Switch locations on the dashboardSwitch locations on the dashboard

 

Let us know if you have more questions! 

12,356 Views
Message 32 of 66
Report

My widget shows up properly (full selection of services in a menu format) on apple computers and mobile devices, but it only shows up as a single button (no information or services listed) on google chrome. Why is it not showing up identically across all web browsers?

12,188 Views
Message 33 of 66
Report
Square Community Moderator

Hi @audrey00

 

Were you experiencing this on your own web browser or was this happening to a customer of yours?

 

Have you tried clearing the cache on Google Chrome and making sure its fully updated? 

11,926 Views
Message 34 of 66
Report

Website Embed doesn't seem to work in Wordpress.   When copying the embed code and inserting into my container, I get  a "book appointment" button.  Why am I getting a button!!?  I'm trying to embed the booking interface?  Please help!

11,464 Views
Message 35 of 66
Report
Square Community Moderator

Hey @algsure

 

That sounds strange. We'll have to take a look at this with you to figure out what might be happening. 

 

Reach out to ourAppointments team directly and they'll get you taken care of. 

10,984 Views
Message 36 of 66
Report

I'll follow up with them. Thanks.

11,056 Views
Message 37 of 66
Report

 I just spoke with Mike. He didn't have a way to help me get what I needed. Apparently the embed code will resize itself to a "Book Appointment" button if the container is too small. That is a pretty cool feature should someone be on my site on mobile or tablet but doesn't help otherwise. I've tried to expand my container to 100% width and height and I still cannot get it to work properly. There isn't even a way to tweak the widget size directly to make it fit.  Any advice from here is appreciated!

11,066 Views
Message 38 of 66
Report

This doesn't work on my wordpress site. I paste the code you gave me and this is what it looks like on my page. Just the code written out on the page.

https://jqhypnosis.wordpress.com/schedule-appointment/?preview_id=190&preview_nonce=82c9f54589&_thum...

11,080 Views
Message 39 of 66
Report

How to make this a sidebar in wordpress elegance theme?

11,068 Views
Message 40 of 66
Report

Thank you for the information. I have been trying to embed the Square Appointments booking flow in my WordPress+Elementor Free website and it doesn't work. So far I tried using the HTML and Shortcode widgets, but I get the 403 Server Error message. Can you please tell me how to do it?

Any help will be greatly appreciated.

10,818 Views
Message 41 of 66
Report

It's been 2 weeks since I asked about this and still I do not get an answer. I was able to fix the server error by disabling WordFence plugin but still the script takes over the whole page and I can't modify it anymore.

10,780 Views
Message 42 of 66
Report