Tutorial: Allow customers to search for available time slots on selected date(s) with as few clicks as possible and using a compact widget
In this tutorial we assume you have hour-based resources such as 30min/1h appointment or rental slots. There are a number of ways to allow your customer to start the reservation process giving priority to date/time selection rather than starting with a specific resource, such as the upcoming availability which shows available slots in the next week or so, the calendar preview which shows a condensed and detailed overview of all available/busy slots (also for multiple resources at once) or, most commonly, the availability search we'll use in this tutorial. Here we'll use the search mode.
For hour-based resources we'll most likely want to choose the search type where the customer chooses a single date and they get all available 30min/1h slots for the day for all resources with availability. It would be also possible to have the customer select two dates where the system searches for all available slots within the selected date range. The first choice will create a more compact widget. In this tutorial we'll want to give the customer the choice between 30min and 1h appointments/rentals. You could skip this and always preselect a duration for an even more compact widget.
In order to get started, go to Integrate with my website and select Advanced from the Planyo Plugin / Advanced integration section. We won't be using the search widget because that widget is meant to display the results elsewhere while for the tutorial we want a compact widget showing the results and then the booking form all in the same place on a single page.
Feel free to change any other options, here we'll only mention the ones that need to be set. We'll keep the HTML code integration setting (Any website creator) which means that you'll be able to paste the presented HTML code in any website creator which allows you to paste custom HTML code including javascript and css styles.
Change Default mode to Search box, choose only one of the Sort-by field choices, such as Resource name to avoid an extra dropdown from being displayed and then change Search type to Find all available hours during a single day.
Select Show only the calendar picker without date fields - what this will do is it will remove the Submit button as well as the date field, which saves the user 2 clicks when performing the search (only 1 click is needed!).
Now we'll add the appointment/rental duration dropdown. Select the checkbox Let your customers choose from a list of specific rental durations during the search period and add 2 predefined values: 30 minutes and 1 hour. Place both labels in the Text field and leave the other predefined values empty.
Once done setting all search options click the Copy button above the HTML code for the Planyo plugin and paste it on the website where you'll be embedding it. The entire widget is now quite small and requires a single click in order to show all available resources and slots during a single date.
Note that changing the Search type option to Find all available periods (also shorter) within given search period would result in the date picker including two consecutive months where the user can choose a date range using two clicks on the calendar. After the second click the results get updated and show all available time slots within the selected dates.
For hour-based resources we'll most likely want to choose the search type where the customer chooses a single date and they get all available 30min/1h slots for the day for all resources with availability. It would be also possible to have the customer select two dates where the system searches for all available slots within the selected date range. The first choice will create a more compact widget. In this tutorial we'll want to give the customer the choice between 30min and 1h appointments/rentals. You could skip this and always preselect a duration for an even more compact widget.
In order to get started, go to Integrate with my website and select Advanced from the Planyo Plugin / Advanced integration section. We won't be using the search widget because that widget is meant to display the results elsewhere while for the tutorial we want a compact widget showing the results and then the booking form all in the same place on a single page.
Feel free to change any other options, here we'll only mention the ones that need to be set. We'll keep the HTML code integration setting (Any website creator) which means that you'll be able to paste the presented HTML code in any website creator which allows you to paste custom HTML code including javascript and css styles.
Change Default mode to Search box, choose only one of the Sort-by field choices, such as Resource name to avoid an extra dropdown from being displayed and then change Search type to Find all available hours during a single day.
Select Show only the calendar picker without date fields - what this will do is it will remove the Submit button as well as the date field, which saves the user 2 clicks when performing the search (only 1 click is needed!).
Now we'll add the appointment/rental duration dropdown. Select the checkbox Let your customers choose from a list of specific rental durations during the search period and add 2 predefined values: 30 minutes and 1 hour. Place both labels in the Text field and leave the other predefined values empty.
Once done setting all search options click the Copy button above the HTML code for the Planyo plugin and paste it on the website where you'll be embedding it. The entire widget is now quite small and requires a single click in order to show all available resources and slots during a single date.
Note that changing the Search type option to Find all available periods (also shorter) within given search period would result in the date picker including two consecutive months where the user can choose a date range using two clicks on the calendar. After the second click the results get updated and show all available time slots within the selected dates.