Square Appointments widget opens a new tab instead of staying on the same page

[2pha]

I have this problem too.
the widget shows all the services, but clicking on any of them just opens a new tab.
The "appointment summary" is shown but is basically useless.
The "embeddable widget" was one of the main reasons I chose to sign up with square.... what an utter disappointment.
Their widget is pretty much just a list of services that link to their appointment page.

[Laurie_]

Hi @2pha!

What you've described is actually the expected behaviour when using the Square Appointments embeddable widget.

The widget is designed as a lightweight embed that introduces your services and then directs customers to complete their booking through Square’s site. This approach ensures a secure booking experience, but it does fall short of a fully seamless embedded experience.

For that, there are some Sellers who have customised their call-to-action buttons on their own sites, to open the booking page in the same tab. This would require some coding experience though which sits a bit outside our scope of support. You might find some useful information on Square's Developer Forums if you wanted to go down that road.

[2pha]

This is a total copout.
The "widget" is nothing more than an iframe, which even has the appointment summary which makes no sense in the context it's in.
The fact that on the widget, clicking on a service opens a new tab/window makes me think that the event listener detects that it is in an iframe.... weird.
Many other booking platforms provide a "widget" that does not direct away from the website.
If I had known that the square "widget" functions as it does, I would no have gone with square for my appointment booking.
I am happy enough with everything else though to be fair.

I have over 20 years experience building sites.... if I could find an square appointments api, I would use that, but I can not find one. Can you direct me to one?

[dieterslicke]

Personally I prefer this new behaviour. We found so many customers struggled with the iframe on mobile when everything was done within it. Now it's much more user friendly because people don't get confused with the scroll within a scroll (I normally hate iframes for this reason!).

The other good thing is now you can actually link to individual services in Square's booking tool. Previously this was not possible. This has enabled us to create a much smoother user experience for people from our website to book individual services without having to scroll the list.

[2pha]

interesting,
have you created buttons for each of your services?
What is the flow like when a customer want to book 2 different services?

[dieterslicke]

Sorry for the delayed reply! For some reason I've missed notifications from the community for a few weeks (might have a stray email filing rule hiding them!).

No, we haven't created buttons for each service.

When you are on your website booking flow, if you click any service, it opens in a new tab, if you click around a bit in this page, take note of the URL behaviour in your address bar.

Basically each service has it's own URL in this new booking site. So you can actually send this link to a customer if they're struggling to find the right service.

For example this is our booking site: https://book.squareup.com/appointments/ol8qrjlk4hgojx/location/SPP0Z1ATCJB06/services

Then if I wanted to get some directly to our Signature package, this is the link: 

https://book.squareup.com/appointments/ol8qrjlk4hgojx/location/SPP0Z1ATCJB06/services/F2P3ONOZS7QDOM...

I've tested this incognito to make sure it's not a link that might change and it also works well.

I have now integrated these into our website's menu page to link each service directly to the Square service booking url for a more seamless booking experience for our clients: https://dieterslicke.com/menu (have a look at each table and click each service name to see what I mean).

This was previously not possible with the old booking flow tool.

Pretty cool! Hope that helps.

[2pha]

Thanks for the reply..

I really still don't understand why square advertises that you can integrate the booking flow into your website.. when it is not integrated at all.
And why is the "appointment summary" in the widget if it doesn't even update?
Anyway... I think I am going to develop my own appointment system instead of relying on square, which is sad as I have been quite happy with everything else square has to offer.

[dieterslicke]

To be honest I've looked at a lot of different platforms and they're all doing the same iframe integration.

It's annoying but no one wants to spend money building a proper integration for each web platform (which sorta makes sense because there are just too many but also sucks).

When you say the appointment summary doesn't update - what you mean with this? As in the service description?

I'd love to build something too, but I remind myself of the billions of dollars Square has no doubt poured into this platform and it still isn't perfect (which is the issue with every platform .... there is always gaps and compromises unfortunately).