Acuity Scheduling Quick-Start Guide
Share data between Confection and Acuity Scheduling with a few simple steps.
Issues? Questions? Feedback? Leave a comment. Already have a Confection account? Already installed Confection on your site or app? Skip to step four. New to Confection? Learn more here.
If you haven’t already, create a Confection account. If you already have a Confection account, log in.
Click “My Account” (or “Set Up My Account” if you’re accessing your account for the first time). Enter your contact information, the domain(s) on which you want to use Confection, and select one of our two data storage options. Then, click “Save Changes.”
Click "Install Confection" (If you're accessing your account for the first time, this will be the default screen.) Select your preferred langauge, CMS, platform, or framework to download the relevant scripts.
At this point, use the relevant language, framework, CMS, or platform quick start guide to get Confection up and running on your site or app. Then, continue with step four.
Acuity Requirements
Because we need access to both custom CSS and the API, you'll want to make sure you're subscribed to Acuity's "Powerhouse" plan. For more information, see Acuity's pricing page.
Confection's Acuity webhook allows customers to write event and form data to their Confection accounts each time an order is completed or an appointment is scheduled, rescheduled, cancelled, or updated. As a bonus, if you're using Confection's Google Analytics integration (UA or GA4), the Acuity webhook will also send information there. This will help you improve visibility into Acuity user flows in GA.
To set up Confection's Acuity webhook, log in to your Acuity account, and select "Intake Form Questions" from the left menu. If you don't have a form yet, click "New Custom Form." If you'd like to use an existing form, click "Edit" beside that form.
Once you've loaded the form editor, click "Textbox" from the "Add Questions" menu. In the "Question" field, add ConfectionUUID. The field does not have to be required, and "Size" can be set to "Small (fits one line of text)." When you're done editing, click the "Save Form" button to save your changes.
Copy the ID of the custom textbox that you just created. To find the field ID, place your cursor over the field and right click (PC) or control-click (Mac) to load the browser inspector. In the elements viewer, you'll see a something like the following:
<li id="field_13271732" class="form-field margin-top field-hidden">
The portion in bold (13271732) is the field ID. Once you've copied it, you can close the browser inspector.
Next, click "Customize Appearance" in the left menu. Select "Advanced CSS," and insert the following:
[data-field-id="%yourIDhere%"]{display: none !important;}
Just be sure to replace %yourIDhere% with the field ID you copied earlier in this step. Click "Save Changes" to save your custom CSS.
Next, click "Scheduling" in the left menu to return to the main admin screen. Select "Integrations" in the left menu, and then click "API" at the top of the right screen. On the next screen, click "view credentials." Copy both your user ID and your API key.
Next, visit "Integrations" > "Webhooks" in your Confection dashboard. Click "New Webhook," and then click the "Acuity Scheduling" tile. Paste your Acuity user ID and API key in the relevant fields, and then click "Create." On the next screen, click "Activate Webhook." Copy your webhook URL for the next step. (Note, on this screen, your API key won't appear. We hide it for security reasons.)
In Acuity Scheduling, return to the integrations screen. Find the "Webhooks" option, and click "Set Up." Enter your Confection webhook URL in every relevant field. (We recommend adding the URL to all five fields.) Lastly, click "Save Settings" to add your webhook to Acuity.
One last step. To add the relevant Confection UUID to your Acuity form, please do one of the following, depending on which method you're using to serve your Acuity form:
Add the confection-acuity-link class to the anchor (<a>) portion of your link, button, or bar. For example:
Direct Link<a href="https://company.as.me" class="confection-acuity-link">https://company.as.me</a>
Booking Button<a href="https://app.squarespacescheduling.com/schedule.php?owner=12345678" target="_blank" class="acuity-embed-button confection-acuity-link" style=" ... ">Schedule Appointment</a><link rel="stylesheet" href="https://embed.acuityscheduling.com/embed/button/12345678.css" id="acuity-button-styles" /><script src="https://embed.acuityscheduling.com/embed/button/12345678.js" async></script>
Booking Bar<div class="acuity-booking-bar" style="display: none;">Your Business Name<a href="https://app.squarespacescheduling.com/schedule.php?owner=28293975" target="_blank" class="acuity-embed-button confection-acuity-link">Schedule Appointment</a></div><script src="https://embed.acuityscheduling.com/embed/bar/28293975.js" async></script>
Paste this code above the </head> tag on the site where the above link, button, or bar appears:
Just replace %your_field_id% with the field ID you created earlier in this process. (We use 13271732 as an example.)
Remove the native </script> tag from your embed code. This appears in bold below:
<iframe src="https://app.squarespacescheduling.com/schedule.php?owner=12345678" title="Schedule Appointment" width="100%" height="800" frameBorder="0"></iframe><script src="https://embed.acuityscheduling.com/js/embed.js" type="text/javascript"></script>
Replace src with data-confection-src in the edited iframe tag. For example:
<iframe data-confection-src="https://app.squarespacescheduling.com/schedule.php?owner=12345678" title="Schedule Appointment" width="100%" height="800" frameBorder="0"></iframe>
Paste this code above the </head> tag on the site where the iframe embed appears:
Just replace %your_field_id% with the field ID you created earlier in this process. (We use 13271732 as an example.)
That's it. You're done.
Questions or comments about using Confection with Acuity Scheduling? Leave them below.
You can also use the chat app in the lower right corner.