Embedding Booking Flow

[Curlers]

I am looking to replicate a similar booking flow to what is shown on this demo: https://squaresite.examplesalon.com/

Through my Square Appointments dashboard I have created a booking button, which redirects through to https://squareup.com/appointments/book/<UNIQUEID> -  I am looking to keep the customer on my (HTML) website without passing them over to a 3rd party URL.

Instead, I have went to Online Booking > Website Embed and while this does embed the booking widget onto the website, it lists all the services. What I am looking to do is create a button that opens the booking widget up - exactly as seen in the demo.

I was hoping for some guidance please?

[Curlers · Accepted solution]

Hi laowaichris

Yes I managed to get this sorted. My web agency used HTML and CSS to integrate a custom modal popup on to my website and then removed .js from the Square embed script; This allows you to place the form within an iframe that will display on your website without redirecting to Square Appointments.

[MJD]

I’m confused, what shows up when I go to that link is the same as what you described with a list of services, I’m not a customer of the appointments system but I understand quite a bit about the square platform, can you create a checkout link to the type of appointment you want to charge and assign that to the link? 

hope I could help, If you understood this and were able to fix the issue please do mark it as best answer to support future sellers!

[Curlers]

Thank you for the answer Matt. To understand what I am saying you will need to be familiar with the Square Appointment software as this does not involve any other part of the Square platform. To elaborate,  through the Square Appointments dashboard admins can go to Online Booking > Booking Site to create a booking button which outputs the following embed code:

<!-- Start Square Appointments Embed code --> <a target="_top" style=" background-color: #1E93CC; color: white; height: 40px; text-transform: uppercase; font-family: 'Square Market', 'helvetica neue', helvetica, arial, sans-serif; letter-spacing: 1px; line-height: 38px; padding: 0 28px; border-radius: 3px; font-weight: 500; font-size: 14px; cursor: pointer; display: inline-block; " href="https://squareup.com/appointments/book/g2ox4r13xbkqpv/LMG1J6AV30WXK/start" rel="nofollow">Book an Appointment</a> <!-- End Square Appointments Embed code -->

I have embedded this code on my (bespoke HTML) website, but clicking the button opens a new tab that redirects the user to my booking flow here: https://squareup.com/appointments/book/g2ox4r13xbkqpv/LMG1J6AV30WXK/services

In the demo (https://squaresite.examplesalon.com/) this does not happen; when you click the button, and iFrame opens up with the booking flow - keeping the user on the website where the button is embedded. 

On the admin panel I can go to Online Bookings > Website Embed to get this embed script:

<!-- Start Square Appointments Embed Code --><script src='https://square.site/appointments/buyer/widget/g2ox4r13xbkqpv/LMG1J6AV30WXK.js'></script><!-- End Square Appointments Embed Code -->

This does directly embed my booking flow onto my web page, to avoid redirecting the user, but the full list of services is displayed which looks messy on the page. I would rather the user has to click my 'Book Online' button and then the booking flow widget opens up on my web page. Exactly the same as how it works on the demo website.

I hope this explains the problem a bit better and I appreciate you trying to help.

[MJD]

I’m guessing you have an understanding of HTML? I am too! If you change the link the button leads to, you can make it lead anywhere so try changing the link to the particular place on square appointments you want it to take you, if you send me the link you want and the code snippet you need to lead to it I can change this for you if you’re not used to coding (I don’t know if you’ve coded the site yourself or hired someone to do it for you so just thought id offer) 

[Curlers]

Yes I have a decent understanding of HTML & CSS, . That's a good idea Matt, I will try combining the scripts too see if I can replicate the sort of function I am looking for. I appreciate the offer and help, thanks again!

[MJD]

No problem, tell me if there’s anything I can do to help! 

[laowaichris]

Hi Curlers, I've stumbled across your post as I am after exactly the same result with my booking flow. Did you manage to get this sorted? And if so, could you please share your workaround? Thank you. 

[Curlers · Accepted solution]

Hi laowaichris

Yes I managed to get this sorted. My web agency used HTML and CSS to integrate a custom modal popup on to my website and then removed .js from the Square embed script; This allows you to place the form within an iframe that will display on your website without redirecting to Square Appointments.

[laowaichris · Accepted solution]

Hi Curlers, thank you for getting back to me. I'm glad to hear you got it working. Following on from your comment, I've been experimenting with a modal popup and amending the script, but I'm still having no luck (probably because I know next to nothing about HTML and CSS). Would you mind sharing a snippet of the code? No problem if it's not possible. 

Thanks again.