Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Maintaining Acuity Scheduling button's popup behavior when changing style


ellesat

Question

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 post
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Posted Images

1 answer to this question

Recommended Posts

Create an account or sign in to comment

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


×
×
  • Create New...