thread Re: Embed the Appointments Booking Widget on your Website in Appointments & Bookings

Embed the Appointments Booking Widget on your Website

Kpay — Wed, 22 Aug 2018 15:20:30 GMT

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:

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

To embed the widget on your Squarespace website:

From your Squarespace Pages menu, select or create the page where you’d like to embed your booking widget.
Click on the area of the page where you’d like the widget embedded and click Add Block.
Select the Code < / > icon.
Remove default code from text box and paste the code provided in your Appointments dashboard > click Apply.
Click Save. Once you exit editing mode and refresh the page, the embedded widget will display.

To embed the widget on your Wix website:

From your Wix site Editor, click the + Add icon from the menu on the left-hand side.
Then click More and click HTML iframe.
Drag and drop and resize the embed box to position it as you’d like it to appear on your site.
Click Enter Code.
In the HTML iFrame pop up box (see the screenshot above), paste the full embed code from your Square Appointments dashboard.
Click Apply > and finally click Publish to publish the changes to your site.

To embed the widget on your Weebly website:

From your Weebly site editor, click and drag the embed code button from the toolbar into the desired section of your page.
Resize margins as needed.
Click within margin to set custom HTML > click Edit Custom HTML.
Paste embed code > click outside of embed box to set changes.
Click “Publish”.

Note: embed code won’t take up the entire page as previewed. Consider resizing it accordingly after publishing and refreshing the page.

To embed the widget on your WordPress website:

Select/create page where you’d like to embed your booking widget.
Click the HTML tab in the page editor > paste code provided in your Appointments dashboard.
Click Preview or Publish.

Re: Embed the Appointments Booking Widget on your Website

luxbarber — Sat, 10 Jun 2017 18:59:18 GMT

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

Re: Embed the Appointments Booking Widget on your Website

EJ_ — Tue, 13 Jun 2017 17:03:11 GMT

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 👍🏼

Re: Embed the Appointments Booking Widget on your Website

InspiredLifeCoa — Fri, 28 Jul 2017 21:35:21 GMT

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

Re: Embed the Appointments Booking Widget on your Website

Helen — Wed, 09 Aug 2017 18:49:25 GMT

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.

Re: Embed the Appointments Booking Widget on your Website

simplserv — Fri, 11 Aug 2017 11:40:35 GMT

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.

Re: Embed the Appointments Booking Widget on your Website

Leslie1 — Tue, 15 Aug 2017 20:16:51 GMT

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.

Re: Embed the Appointments Booking Widget on your Website

Helen — Tue, 22 Aug 2017 17:56:56 GMT

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!

Re: Embed the Appointments Booking Widget on your Website

hyuk1027 — Tue, 03 Oct 2017 03:27:58 GMT

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

Re: Embed the Appointments Booking Widget on your Website

Antbalf — Sat, 07 Oct 2017 18:46:41 GMT

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.

Re: Embed the Appointments Booking Widget on your Website

Helen — Tue, 10 Oct 2017 18:12:11 GMT

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

Re: Embed the Appointments Booking Widget on your Website

Helen — Mon, 09 Jul 2018 21:44:44 GMT

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

Re: Embed the Appointments Booking Widget on your Website

hollylac — Sun, 05 Nov 2017 18:07:57 GMT

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.

Re: Embed the Appointments Booking Widget on your Website

EJ_ — Wed, 08 Nov 2017 16:44:48 GMT

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.

Re: Embed the Appointments Booking Widget on your Website

PinotCar — Mon, 04 Dec 2017 19:27:49 GMT

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.

Re: Embed the Appointments Booking Widget on your Website

ewllc — Wed, 13 Dec 2017 17:46:03 GMT

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?

Re: Embed the Appointments Booking Widget on your Website

Kpay — Fri, 15 Dec 2017 23:55:31 GMT

@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 dashboard

Let us know if you have more questions!

Re: Embed the Appointments Booking Widget on your Website

audrey00 — Thu, 08 Feb 2018 03:19:59 GMT

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?

Re: Embed the Appointments Booking Widget on your Website

EJ_ — Thu, 08 Feb 2018 21:15:48 GMT

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?

Re: Embed the Appointments Booking Widget on your Website

algsure — Fri, 06 Apr 2018 23:47:03 GMT

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!