Today, we’re diving into how you can guide your users to the right place in your SuperSaaS schedule in as few steps as possible. Master this to streamline your booking process and decrease the time your customer spends navigating your schedule.
When you start using SuperSaaS to streamline your booking process, your customers might need some guidance on how they can best navigate your schedule. While it is certainly convenient to simply send them a link to your schedule, some customers might struggle to find the exact class, resource, or service they need. To ensure your customers effortlessly find the perfect time slot or date, you might want to provide them with a “deep link” that preselects the right class, resource or service for them.
How, you ask? Let us share a few ways below.
1. Direct users to a specific class, resource or service
By default, a SuperSaaS schedule opens on the first availability in your schedule. However, you can send customers to a specific month, week, or day by modifying your schedule link. Depending on your schedule type, the steps could look a bit differently.
Capacity schedule: add the slot ID to your link
If you want to link directly to a specific class or slot in your capacity schedule, you can do so by adding the slot ID to your link. To find the slot ID, go to your administrator dashboard and click on Supervise next to the name of your schedule.
Once the page has loaded, click on the spyglass (magnifier) icon next to the class of which you want to link to. The page that opens shows the deep link directly to the slot, with the slot ID at the end.
For example, in our Cupcake workshop demo the slot called “Cupcake Mania” has this link:
supersaas.com/schedule/demo/Cupcake_Workshop/12320083
Resource or service schedule: add the name of the resource or service to your link
To direct users to a specific resource or service in your schedule, you simply add the name of your resource to the end of your schedule link. Keep in mind here that if your resource usually contains spaces, those will be replaced with underscores (“_”) in your link.
For our meeting room demo this would result in the following link:
supersaas.com/schedule/demo/Meeting_Rooms/Meeting_Room_1
If you use a service schedule, you can follow the same pattern and add the title of a specific service to the end of your schedule link. The same rule applies when your service contains spaces; simply replace those with underscores. The full link to the “Long treatment” service in our Therapist demo would be:
supersaas.com/schedule/demo/Therapist_2/Long_treatment
2. Add URL extensions to show specific schedule pages or classes
Directing users to a specific date
Adding ?day=X&month=X to the end of your URL and replacing the X with the desired day/month will send a user directly to that date. For example, if you add ?day=25&month=12, your user is directed to Christmas Day. Other extensions are ?year=X and ?week=X. You can use these options separately or combined.
Bear in mind that when you combine these URL extensions, you will need to replace each following question mark with an ampersand (“&”). For example, this link would open a calendar on Christmas day:
supersaas.com/schedule/demo/Meeting_Rooms?month=12&day=24
Capacity schedule: directing users to classes with a specific color
If you use a capacity schedule, you can also use an URL extension to display time slots of a specific color.
For example, you could give all beginner classes a green color and all advanced classes a red color.
To do so, add ?color=X to the end of your schedule URL.
The X can be replaced with the number of the color you chose for the time slot. Those numbers are assigned based on the order of the color picking menu, so blue is 0, red is 1, etc.
supersaas.com/schedule/demo/Fitness_Club?color=0
This link will load your schedule, but only with the time slots that have the color specified in your URL. You can also combine this URL extension with others to refine exactly which time slot(s) your users will see.
To read more about URL extensions and find out which other options are possible, please click here.
3. Filter on resource with an color key or drop-down menu
If you have a resource schedule and you do not wish to make use of URL extensions, but you would like to make it easier for your users to book a time with the right resource, you might want to let your users filter the available resources.
There are two ways to present your resources in the schedule. You can use a drop-down menu:
Or you can offer a color key:
The color of the color key match the color of the resource throughout the schedule and, as a result, the appointments that are already booked for that resource. To filter the appointments in the schedule, users click one of the buttons to view all appointments with the matching resource only.
4. Use an integrated widget for more possibilities
You might have noticed in our previous blog posts that we are very proud of our own widget integration. With good reason! You can integrate our widget into your website to so your customers have a seamless booking experience without leaving your website. Though, if that is not quite seamless enough, you can also preselect certain classes, resources, or services to be displayed in the widget so customers do not accidentally register for another class, resource, or service in your schedule. This option requires some technical knowledge as you will be adding a bit of text to the JavaScript snippet that generates the widget, however, it should certainly be doable even if you have not worked with JavaScript before.
To find the widget snippet for each of your SuperSaaS schedules, visit our widget integration page. On this page you can also configure the general appearance of your widget.
With the instructions below, you can preselect classes, resources, or services that you wish to display (and make bookable) in your widget. Other classes, resources and services will not be visible when your users first view the widget.
Capacity schedule: preselect a class or workshop
If you have multiple workshops in one capacity schedule and want a widget to highlight a specific one, find the slot ID on the Supervise page by clicking the spyglass icon on the desired slot. Copy the slot ID add it to your code snippet as select:slotID. Also include view: "free" in the code snippet to make sure the widget opens that slot.
For our Cupcake workshop demo, the standard code snippet is:
<script class="supersaas-widget">var supersaas = new SuperSaaS("demo", "Cupcake_Workshop", {"widget_type": "frame", "menu": "show"})</script>
The snippet that opens a selected slot would instead be:
<script class="supersaas-widget"> var supersaas = new SuperSaaS("demo", "Cupcake_Workshop", {"widget_type": "frame", "view": "free", select:12320083})</script>
Resource schedule: preselect a resource
In the widget snippet for a resource schedule, you can pass in the resource name to preselect that specific resource. With this addition, users will only see the availability for the resource you selected. However, they can still change the resource when finalizing their booking.
The standard code snippet would be:
<script class="supersaas-widget">var supersaas = new SuperSaaS("demo", "Meeting_Rooms", {"widget_type": "frame", "menu": "show"})</script>
To only see the availability for Meeting room 1, your code snippet would then look something like this:
<script class="supersaas-widget">var supersaas = new SuperSaaS("demo", "Meeting_Rooms", {"widget_type": "frame", "menu": "show", select:"Meeting Room 1"})</script>
Service schedule: preselect a service
For a service schedule the change to the snippet looks a lot like that for the resource schedule. You would add select: and the name of the service you wish to preselect. The user can still switch between services with the selector.
The standard code snippet for our Therapist demo is:
<script class="supersaas-widget">var supersaas = new SuperSaaS("demo", "Therapist_2", {"widget_type": "frame", "menu": "show"})</script>
If you wish to preselect the “Long treatment” service specifically, you would use:
<script class="supersaas-widget">var supersaas = new SuperSaaS("demo", "Therapist_2",{"widget_type": "frame", "menu": "show", select:"Long treatment"})</script>
If you would like to add multiple widgets with different classes/resources/services on your page, you can certainly do so. You can, for example, also add different versions of the widget to various pages on your website.
Find our more about JavaScript configurations in our developer widget documentation. If you have any additional questions, our support team are here to help.