Can you edit the Square Appointments Widget/Booking Button on Third-Party sites?

[KelJopuka]

I want to include a booking page on my existing website, I have found the sales channels section, with the embed codes for the list, or booking button. 

I want a list of appointment services, but need to edit how it looks on my site. 

I could list the services separately and then just put a 'book now' button, but it then just comes back to the list on square. I really want people to be able to stay on my site to book, but just need to be able to change the way it looks. 

Can we link to individual services with a book now button? Rather than the book now button going straight to the full list. 

Is this possible? Am I even making sense? It is early lol 

[Arie · Accepted solution]

Hye, @KelJopuka,

I think I know what you mean- so instead of the button taking you to the list of all services you offer, you'd like to have several buttons, leading to a direct booking page for that particular service only. 

You can create custom widgets, that only show particular services, via the your Square Appointments dashboard. Widgets are a bit different to the booking buttons, and you can either create a booking button via the widget code, or a code that embeds directly on your website. 

 Here's how to get started:

1. Log in to your Dashboard and select Appointments.

2. Head to Online Booking > Customised Widget. 

3. Click Create New Widget, and select which services you'd like to include. 

4. Click Save when you're done.

5. Copy your Booking Button, or Widget Code to add to your website.

Please let us know how you go! 

[KelJopuka]

Thanks @Arie 

I will give that a go now and let you know 🙂 

[KelJopuka]

Back again. 

I can get that working, it will display either a link or an inline booking widget to just the one service. Which is what I am after. However, I just have a few issues. 

The biggest one being that as soon as I embed that code (for the inline booking widget), I am no longer able to edit anything else on the page via elementor. I am guessing this is an elementor issue, but I have read of people having this issue when using the square inline code. I will continue to look into that. 

The other one, which I assume can't be done, but worth asking. Is there a way to edit the colours/look of the inline widget? I want to have people do everything on the site, but would like to make the widget look the same as my site design. 

Any ideas @Arie ?

Thank you for your help:-) 

[Arie]

Unfortunately, the widget can't be customised, @KelJopuka - at this time, only the standard booking button, which would lead to all appointments can be edited. In case you'd like to use/ edit this button:

1. In your Dashboard, head to Appointments > Online Booking > Channels. 

2. Select > Add your booking flow to an existing site > create button. 

3. From here, you can edit the font, colour and shape of the button.

4. Copy the code and hit Done when you're finished. 

So at the moment, you'd either have the option to have the customise the button, but lead to a full list of all services, or use the widget option I suggested first, which would allow you to customise the list, but not the button. I'd love to see more customisation for the custom widget as well, and will pass this on to our team as a suggestion!

In regards to the issues you're seeing on elementor, I'm not familiar with wordpress but let us know how you go editing the site. 

[KelJopuka]

Thanks @Arie 

I managed to use the link from the booking widget to a single service to create a button in my site theme 🙂 

Hopefully, in the future, the custom widget will be able to be customised. Thanks for passing that suggestion on. 

[Arie]

Happy to hear you were able to create a button that suits the look of your site @KelJopuka! Let us know if you've got any other questions, or suggestions for us. 

[moveworkplay]

Hi there, regarding client online booking themselves (embedded in our website) just wondering if there is a way to connect a particular service with a set time-slot? ie. Appt type 1 options at 8am and 9am on a set day, Appt type 2 options at 10am and 11am on same day but both with the same staff member? Thanks so much!

[Arie]

Hi @moveworkplay,

Thanks for writing in, I noticed it's your first post, welcome to our community 👋 

While you can create custom widgets to display certain services, or staff members only, it's not currently possible to only select one time frame for the appointment. I've merged your post onto this thread where I shared some step by instructions on how to customise the embedded widget. Please let us know how you go!

[EMarais]

Hi. We have an Audiology Practice in Gold Coast, Queensland, Australia. We use the online booking through Square on our Website, and our customers love it.

We offer a number of services, for which customers can book a consult. I was wondering if the booking link can be updated to select the service based from where the link is clicked. If I am on a page in my website related to hearing aids, and a customer clicks on 'BookNow', it would be great if the booking has the service selected for them. If they are on our page related to custom hearing protection, and they click on 'BookNow', it would be great if the booking can select the service automatically. I see this can be done through Setmore, the integration option, but i would love to not have to move to a new online platform.

Thanks, Eduan

[Arie]

Hey @EMarais,

Thanks for writing back in to our community!

You can create custom widgets with Square Appointments, which can be linked to specific services. I've merged your post to this thread where I've included the steps to getting started. 

[JennyL]

All I need is to change it from Blue to Green and none of the CSS is working.

[Laurie_]

Hi @JennyL,

Thanks for reaching out with this question and welcome to the Seller Community! 👋

I've merged your post with an existing thread where we've answered this question. Unfortunately, the widget itself cannot be further customised, however, another option is to include a booking button instead which you can edit to fit the theme of your existing site.

In this thread, my colleague has included the steps to edit the booking button.

Sorry, it's not the answer you were looking for! If you have any further questions on this, please do not hesitate to let us know.