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!

Message 1 of 51
110,674 Views
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!

50 REPLIES 50

How do I customize css for the embed to match my site's styling?

Message 2 of 51
108,291 Views
Square

Great question @luxbarber 

 

You're able to change the button colors, but full customization would be a feature request. This specific feature request isn't something that's on our road map at the moment, but I'll let the right teams know that it's something you'd like to see available in the future 👍🏼

Message 3 of 51
108,209 Views

This is pretty crucial for me, and I would imagine for others. This needs to become a priority on your road map! The solution of going to a new page/tab on Square to do the actual booking is a disconnect for users, and the business-specific branding is poor. You really need to provide two things:

 

1) The ability to truly and easily embed the widget on sites using WordPress. You need to make a WP plug-in that provides short codes so we can place the widget on our own site. And within that, much more control over font sizes, colors, overall size and layout. I can force it to embed on my WP site through code tinkering, but the widget's display area is way too large for my pages, and the styling is totalyl different.

 

2) Until then, if we have to bounce out to Square, MUCH better control over the appearance of the booking page/widget, even if it's on Square - better branding, and ability to adjust font sizes, colors, overall size and layout. Maybe even allow linking to a CSS file on our site so we can tinker.

 

BookFresh had this down much better, so I'm surprised you don't just follow their lead since you own BF now. We like Square's integration with payment and other features, so we'll probably live with the functionality as-is for now, but it leaves a lot to be desired, especially compared with competitors.

Message 4 of 51
104,034 Views
Admin

@Antbalf! I'm sorry that the current widget hasn't met your expectations but I really appreciate your detailed feedback. I''ll share it with the Appointments Product team. I don't have a timeline on when we'll be able to offer additional customization, but the Appointments team is actively tracking this. If we have any updates in future we'll update this thread. 👍

Helen
Seller Community Manager, Square
Find step-by-step help in our Support Center
Message 5 of 51
103,887 Views

@Helen - any updates on this? Hoping to be able to drop the appointments feature into my Squarespace site -- but want to make sure I can match the design / styling of the rest of my site.

Message 6 of 51
79,814 Views

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.

 

Captura de pantalla 2020-10-30 a la(s) 12.09.09 p. m..png

 

Captura de pantalla 2020-10-30 a la(s) 12.09.16 p. m..png

 

 

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.

Message 7 of 51
10,839 Views

How exactly can you change the button colours? 

 

Also when I try to embed these appointments into my website ... the page simply skips my page all together and links directly to square appointment. No headers, nothing. 

 

I am using PageCloud.

 

Cheers,

 

James

 

Message 8 of 51
9,288 Views

"You're able to change the button colors"
How can I change the button colors? I either can't find the documentation, or the documentation I'm looking at is inadequate. I'm embedding in a WordPress site, and the only instructions are to copy and paste a code snippet into a new block. There's nothing in that documentation about how to customize the css this block uses, or where to include css this block uses. 

Message 9 of 51
45,222 Views
Beta Member

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!

Message 10 of 51
16,006 Views

This isn't working on WordPress.com - it's stripping the javascript code.

Message 11 of 51
100,420 Views
Admin

Thanks for flagging @InspiredLifeCoa and I'm so sorry for the late reply! 

 

If you're still experiencing this issue go ahead and contact our Support team directly so we can take a closer look. It might also be helpful to reach out to WordPress about this (if you haven't already) to see if the issue might be on their side. 

 

Helen
Seller Community Manager, Square
Find step-by-step help in our Support Center
Message 12 of 51
98,555 Views

same issue here, the script takes over my whole page.  😞

Message 13 of 51
61,936 Views

same issue here, the code takes over my whole page on pagecloud.

Message 14 of 51
35,073 Views

i am having the same issue i had to delete my page and start over the script takes over the whole page allowing notthing to be seen other than the booking stuff. i am not sure why there code does not stay in the container but we will not be able to use it until this is fixed. 

Message 15 of 51
22,657 Views

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

Message 16 of 51
7,924 Views

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.

Message 17 of 51
39,694 Views

<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. 

Message 18 of 51
34,699 Views
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, Square
Find step-by-step help in our Support Center
Message 19 of 51
25,567 Views

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

Message 20 of 51
10,412 Views
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, Square
Find step-by-step help in our Support Center
Message 21 of 51
7,796 Views