Can you customize Colors in Square Appointments Widget?

[tccreatives]

I'm trying to embed the square appointments widget to a website however I have having a hard time customizing the css code to change the buttons and links from the blue that square uses as a default to the colors that I already have on my website. How would you do this?

[#2]

Hi there!

I've yet to see a successful customization of the embed buttons beyond what you can do within the Dashboard, but that’s an interesting request. I’ll be sure to pass the suggestion along to our development team.

If you have any success be sure to let the community know in case any other sellers run into the same issue!

[Joe]

Thanks for adding your voice here, @Sloanstileshair! We will be sure to jump back here on this thread when this feature becomes available. Thanks for your patience! 

[LadyBanana]

I would love to match my brand colors as well. It's been 3 years and still no solution for this?. It seems to be pretty simple to implement by Square developers

[nika]

I'm sorry I don't have any new updates to give on this feature @LadyBanana. Really appreciate your patience, though, while the team continues to work towards bettering our Appointments platform!

[Maxmmcdonald]

I'm kind of flabberghasted that this conversation started 4 years ago, with a really simple suggestion on an improvement (being able to make the colors on brand for embedded bookings) and NOTHING has changed. Unfortunately this is a bit of dealbreaker for me, as my brand colors are red and I'd be stuck with blue... not exactly a seamless look. 

[honeybeeeeco]

omg you guys! this was driving me crazy but I've cracked it! You can manually change the colour in the code, just work out the code for the colour you want and add it to the embedded code.. Not sure if this will creat issues with syncing your settings? Makes the button look less crazy and out of place, though. I highlighted the part of code below for clarification

<!-- Start Square Appointments Embed code --><a style=" background-color: #0cc; 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/buyer/widget/ncpk456usbokkf/LKF592QQEVYAK">Book an Appointment</a><!-- End Square Appointments Embed code -->

[honeybeeeeco]

P.s to find the colour menu for square, just go to any customizable button on your site and view "customize site colours" and find the colour you want on the pallette, then copy and paste that code in to your button 

[NailsByNadine]

Is there a way to customize the calendar colors? For instance, I offer appointments in my salon, but also in-home. So it would be convenient to have a different color for each appointment. If I were to look at my calendar and see all my in salon appointments in blue, but my in-home appointments were yellow.. it would make it easier.

[Joe]

Hi there, @NailsByNadine 👋 Welcome here to the Seller Community. Happy to have you join us.

I've gone ahead and merged your post into an existing thread of Sellers who were also looking for information regarding colorizing and customizing different kinds of Square Appointments. It looks like this is an ongoing Feature Request through Square.

As soon as this feature has news to share, we will reach back out to everyone on that thread and update accordingly.