Best way to sell a service & book the appointment on a commerce site?

I am looking for advice for the best workflow for selling and scheduling service products on Squarespace while using Acuity. I would like to be able to sell and schedule directing from the store (because I feel it is the most intuitive) but it seems in order for that to work, I would need to send an email with a link to schedule (which we run into ensuring they don't exceed appointments paid for). The other option would be to embed the scheduler within a page about the service and let them pay and book from the embedded portion.

Please shed some light on this and point out any other possible options or pitfalls. We just expanded to services on the site, so this is fairly new.

Thanks in advance.

Hi! I was just doing some research regarding a similar workflow question for a client (who wants to sell her service products in her store and schedule appointments via Calendly), and I found your question here from April.  

Did you ever find a solution for your website/workflow? Are you processing your payments through the store or via your Acuity scheduler? 

I appreciate any insight or pointers if you have them!

On 4/18/2020 at 7:08 PM, Wsiskey said:

I am looking for advice for the best workflow for selling and scheduling service products on Squarespace while using Acuity. I would like to be able to sell and schedule directing from the store (because I feel it is the most intuitive) but it seems in order for that to work, I would need to send an email with a link to schedule (which we run into ensuring they don't exceed appointments paid for). The other option would be to embed the scheduler within a page about the service and let them pay and book from the embedded portion.

Please shed some light on this and point out any other possible options or pitfalls. We just expanded to services on the site, so this is fairly new.

Thanks in advance.

 

On 10/14/2020 at 10:55 AM, aaronembrey said:

Hi! I was just doing some research regarding a similar workflow question for a client (who wants to sell her service products in her store and schedule appointments via Calendly), and I found your question here from April.  

Did you ever find a solution for your website/workflow? Are you processing your payments through the store or via your Acuity scheduler? 

I appreciate any insight or pointers if you have them!

Were either of you able to come up with a solution. I am having a similar struggle. My business is renting yard displays for special occasions and I need to have customers be able to view available inventory for a certain date then checkout through commerce and have it automatically add them to my acuity schedule.

I'm struggling with this too...

I would think with Squarespace owning Acuity now there should be an elegant solution that combines Squarespace Commerce with Squarespace Scheduling and a seamless migration route... But it seems there is not yet such an option.

If anyone has suggestions that would be great.

Glad to help. 

I''ve spent months digging deep into this specific problem, figuring out pretty much all the possible methods to achieve this and I have several.

 

I have also custom coded multiple advanced versions of this to several sites. So if you want to sell products with Squarespace, but also have the customer choose an appointment related to the order you have a few options. 

(The examples given below should work both for Calendly as well as the Squarespace/Acuity Scheduling. You'd still need the $12 Professional Calendly plan if you have scheduling before payment)

 

Option 1: Add Scheduling BEFORE payment (checkout)

Check out this video to see an example. 

This has the benefit of customer seeing available dates before they commit to a purchase. So you'll avoid the situation where customer buys but then doesn't see a date they'd like and cancel. You also might have more purchases since customers are sure they'll get the date they want. I client of mine, catering company found this to be better option for them. 

Cons: customer email must be added twice.

    Option 1 A) We can replace the Checkout -button on cart page to say something like "Choose pickup time" or "Select time for delivery". The button would lead to Scheduling page instead or the Checkout page where customer would pay. 

    Option 1 B) We can add the Scheduling widget to the cart page itself. This can be a better user experience since it's more seamless, has less pages and it's more clear that the customer is choosing the date/time for this order with these procucts. How it works? 

How this is done? 

- Use code injection to add the  Scheduling to the cart page OR create a button that says "Choose pickup time" that links to your appointment type. 

The code will depend on your site, it needs variables specific to you, your use case but this code example will give you an idea:

var acuityIframe = '<div id="spacer-before-acuity"></div><h2 class="_9Dk3d9xee cart-title">CHOOSE PICKUP TIME</h2><iframe src="https://app.squarespacescheduling.com/schedule.php?owner=' + acuityOwner + '" title="Schedule Appointment" width="100%" height="800" frameBorder="0"></iframe>';

var insertAcuityIframeAfterElement = function(whichElement){
    $( document ).ready(function() {

            $(acuityIframe).insertAfter(whichElement);
    });

}

if(window.location.pathname.startsWith("/cart")){
  insertAcuityIframeAfterElement(".cart-container");
}

Then in your Scheduling, you'd add a loading spinner and some text to clarify that user is being directed to checkout. This is done in appointment type MESSAGE SHOWN ON CONFIRMATION PAGE. Add loading spinner as a gif and some copy like "Redirecting to payment, please wait..."

In scheduling, use Integrations and the Custom Conversion Tracking -field and javascript to redirect users to the actual checkout. 

Use the Change Wording in Customise Appearance to make the user experience more clear. Don't talk about "Booking appointments", talk about "When will you pick up your order?".

Option 2: Add Scheduling AFTER payment (checkout)

Here is a video example of how Scheduling after payment looks like.

In this solution the checkout and payment is normal. But when customer has paid, instead of order confirmation page saying "order confirmed" – there's a Scheduling widget. This has the benefit that we can use information customer has added in checkout and automatically fill email address and order ID in Scheduling, so customer only need to choose the time.  Example is using in-store-pickup as the use case. We can also show a specific appointment type for different products. So we could for example only shop scheduling if the order has specific products, or we can show a specific delivery method / time for specific products. We can do...almost anything. 

We can also include the link to scheduling in the email confirmation – just in case the customer would close the tab before booking the time. So in a rare case you might not need to contact them and it'd be automatic instead. 

3) Other options

Other options are:
- using a custom product form, adding datepicker and using a datepicker plugin. I recommend the datepicker plugin from sf.digital  It has quite a lot of problems but it can work for some use cases. 
- Adding a custom form to checkout. This way it's for all products at once but you can't add a plugin, block off time or prevent customers from booking a date in the past etc. 
- Use Shopify Buy button and a Shopify appointment App.  If you don't have tons of products you might be able to create a good user experience without coding. But it's a big ask, using both Shopify AND Squarespace. If you have more than 1 product it could get complex to maintain
- Use Stripe payment link and link to scheduling widget or direct scheduling page in the thank you -page

"Cool...but how do I get scheduling to Squarespace checkout to my site ASAP?"

1. I'm writing a blog post about this. I'll update it constantly to include tutorials, videos, products. 

2. I also have a plugin (BETA) that adds acuity to checkout. It's early beta and based on a custom implementation I coded for a client. 

3. And you can also hire me to screenshare and code + design any of these, tailored specifically for your use case as I know every part of this process, from coding to design and scheduling settings, email templates etc. 

-Fenix
 

EDIT: One more option came to mind. 

You can create product landing pages in Squarespace (not Store page, a normal page) and use button block to link to an appointment type to sell that product and accept payment in Scheduling.

This would create the best user experience for customers. However it only works if you're selling a single product (like a  yoga class or consulting session). 

See how works looks in this video. 

 

 

Edited November 26, 2021 by codeandtonic
added one more method

On 11/25/2021 at 7:34 AM, codeandtonic said:

Option 1: Add Scheduling BEFORE payment (checkout)

 

Check out this video to see an example. 

...

    Option 1 B) We can add the Scheduling widget to the cart page itself. This can be a better user experience since it's more seamless, has less pages and it's more clear that the customer is choosing the date/time for this order with these procucts. How it works? 

How this is done? 

- Use code injection to add the  Scheduling to the cart page OR create a button that says "Choose pickup time" that links to your appointment type. 

The code will depend on your site, it needs variables specific to you, your use case but this code example will give you an idea:

var acuityIframe = '<div id="spacer-before-acuity"></div><h2 class="_9Dk3d9xee cart-title">CHOOSE PICKUP TIME</h2><iframe src="https://app.squarespacescheduling.com/schedule.php?owner=' + acuityOwner + '" title="Schedule Appointment" width="100%" height="800" frameBorder="0"></iframe>';

var insertAcuityIframeAfterElement = function(whichElement){
    $( document ).ready(function() {

            $(acuityIframe).insertAfter(whichElement);
    });

}

if(window.location.pathname.startsWith("/cart")){
  insertAcuityIframeAfterElement(".cart-container");
}

Then in your Scheduling, you'd add a loading spinner and some text to clarify that user is being directed to checkout. This is done in appointment type MESSAGE SHOWN ON CONFIRMATION PAGE. Add loading spinner as a gif and some copy like "Redirecting to payment, please wait..."

In scheduling, use Integrations and the Custom Conversion Tracking -field and javascript to redirect users to the actual checkout. 

Use the Change Wording in Customise Appearance to make the user experience more clear. Don't talk about "Booking appointments", talk about "When will you pick up your order?".

 

Hi @codeandtonic, love the sound of this option for a client! Do you know if there is a way to link a specific appointment type to a specific shop product? Currently I'm thinking with some products that need scheduling I can hide the product variant, quantity and add to cart button then add a link to the booking page in the item description as a workaround, so the actual purchase is completed via Scheduling for those items. It's a bit clunky, but they still want the shop interface so customers can see all products and services simultaneously.

Would love to hear if you're closer to creating a plugin for this!