Jump to content

Maintaining Acuity Scheduling button's popup behavior when changing style

Recommended Posts

Site URL: http://www.ellesat.com/about

Hi all, I'm trying to add individual scheduling buttons to my page but had a hard time tweaking the Acuity stettings to match the other buttons on my page. I've tried to create the Booking button with the code blocks from the Acuity page, and then change the class to points to to the style used by my default Squarespace buttons, but when I do this the popup functionality is lost.

On this specific page, I want the "Book Now" button under Anita to behave in the same way as the "Schedule Appointment" button under Julian, but I cannot seem to figure it out. Code for each below:

JULIAN: <a href="https://app.squarespacescheduling.com/schedule.php?owner=19478098&owner=19478098&appointmentType=19649138" target="_blank" class="acuity-embed-button" style="background: #40005c; color: #fff; padding: 8px 12px; border: 0px; -webkit-box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;-moz-box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;border-radius: 4px; text-decoration: none; display: inline-block;">Schedule Appointment</a>
<link rel="stylesheet" href="https://embed.acuityscheduling.com/embed/button/19478098.css" id="acuity-button-styles" />
<script src="https://embed.acuityscheduling.com/embed/button/19478098.js" async></script>

ANITA: <center><a href="https://app.squarespacescheduling.com/schedule.php?owner=19478098&calendarID=3874682" target="_blank"  class="sqs-block-button-element--small sqs-block-button-element" style="background: #40005c; color: #fff; padding: 8px 12px; border: 0px; -webkit-box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;-moz-box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;border-radius: 4px; text-decoration: none; display: inline-block;">Book Now</a><link rel="stylesheet" href="https://embed.acuityscheduling.com/embed/button/19478098.css" id="acuity-button-styles" /><script src="https://embed.acuityscheduling.com/embed/button/19478098.js" async></script>

Really don't get why changing the class would break the popup functionality!

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.