Skip to content
Contact us
  • There are no suggestions because the search field is empty.

How to Link Your Website Buttons to Specific Parts of Online Booking

Want your “Book Now” button to take customers straight to the right place? With a deeplink, you can send customers to a specific page in your online booking, such as a particular service or your important pre-booking information, instead of the start of the booking process. This guide shows you how.

Before you start, you’ll need:

  • Access to the page where you want to add the booking button (your website or a button made in your Shortcuts tenant console)
  • The Site ID for your location
  • The Service IDs for the services you want to link to

Step 1: Find Your Service IDs

Each service in your booking system has its own ID number. You’ll need these to link customers to specific services.

Finding one service’s ID:

  1. Open your online booking page for the location you want.
  2. Open your browser’s Developer Tools by pressing F12 on your keyboard.
  3. Click the Network tab.
  4. Click Make a booking.
  5. Select the service you need.
  6. Choose Any Employee.
  7. Continue until you reach the Select date and time screen.
  8. In the Developer Tools, search for appointment_availabilities.
  9. Click the second result (the one marked xhr).
  10. Open the Payload tab.
  11. Expand requested_services, then 0, then links.
  12. Your service ID is the number at the end of the line beginning with href.

Finding all of your service IDs at once:

  1. Open Chrome and press F12 before loading anything.
  2. Go to your online booking page for the business.
  3. If you have more than one site, click the site you need.
  4. In the Developer Tools, open the Network tab and search for services.
  5. Click the line starting with services marked xhr.
  6. Open the Preview tab and expand the line starting with services.

Every available service is numbered in this list. Each one shows its name and an href line, and the number at the end of that line is the service ID.

Not comfortable with Developer Tools? That’s completely fine. Our support team can look up your service IDs for you.

Step 2: Choose Where Your Button Should Go

Pick the screen you want customers to land on. The table below lists your options.

Where the customer lands What it’s for Link ending
Welcome screen Opens your site directly, skipping the location picker. This is the default for single-location businesses. #scs-ols-widget=sites/[siteid]/details
Important information screen Lets customers read important details before booking #scs-ols-widget=sites/[siteid]/pre-book-info
Select services screen Lets customers choose services and add them to their cart #scs-ols-widget=sites/[siteid]/services
Employee selection screen Lets customers pick a staff member (requires a service ID) #scs-ols-widget=sites/[siteid]/select-employee&servicesId=[x,y]

Replace [siteid] with your Site ID, and replace [x,y] with your service IDs. Separate multiple IDs with commas, for example 5,12,34.

Step 3: Add Extra Options (Optional)

You can go a step further by pre-filling your customer’s booking.

Pre-select services in the cart: Add &servicesId= followed by your service IDs. This works on the Important information screen and the Select services screen.

#scs-ols-widget=sites/[siteid]/services&servicesId=5,12,34

Open service categories: Add &serviceCategoryId= followed by your category IDs. This opens those categories when the customer reaches the Select services screen.

#scs-ols-widget=sites/[siteid]/services&serviceCategoryId=1,3

Pre-select services for the employee screen: You must include a service ID when linking to this screen.

#scs-ols-widget=sites/[siteid]/select-employee&servicesId=5,12,34

Step 4: Add the Link to Your Button

Here’s an example of a complete button for your website. Replace the example text and link with your own details:

html 
<a href="#scs-ols-widget=sites/[siteid]/services">Book Now</a>

If you’re using a button made in your Shortcuts tenant console, paste the link ending into the button’s link field instead.

Alternative: Direct Links to Online Booking

If you’d rather send customers to a standalone booking page than embed one on your website, use this format:

https://home.shortcutssoftware.com/[shortcuts-host-header]#/_h/sites/[siteId]/services

To pre-select services with a direct link, add a question mark followed by your IDs at the end:

https://home.shortcutssoftware.com/[shortcuts-host-header]#/_h/sites/[siteId]/services?servicesId=5,12,34

Replace [shortcuts-host-header] with your own host header, which our support team can confirm for you.

Good to Know

  • Parameter names: Any of these names work for service IDs: service_id, serviceId, service_ids, services_id, or servicesId. They all behave the same way, so you only need one.
  • Category names: Either service_category_id or serviceCategoryId works for categories.
  • Test your links: Click each button after adding it to make sure it lands where you expect.
  • Check after changes: If you change or remove a service, update any links that use its ID.

Need Help?

If anything in this guide isn’t working, or you’d like us to set up your links for you, please contact our support team. We’re happy to help.