Play Video

How to Create a Quick-Booking Form with the Wix Bookings API (Part 1/2) | Velo by Wix

To learn more visit:
https://www.wix.com/velo?utm_campaign=bd_youtube_velo

Learn how to create a quick-booking form for your services using the Wix Bookings API. In this video, you’ll build a form that lets clients quickly book an appointment for the current week. You’ll use a lightbox, text and a variety of user input elements to create and design the form. Then, you’ll create a new collection, “Pending Appointments”, to store client info and manage the status of your booking requests (i.e. pending, approved or dismissed). You’ll add several functions to ensure that when clients make a booking request, they’ll only see available dates and times—all of your requests marked as “pending” or “approved” will be filtered out and not appear as an option in the form. When a potential client submits a booking request, all their info will appear in your “Pending Appointments” collection as a new item and their status will be labeled as “pending” until you approve or decline their request.

Check out the second video, “How to Create a an Admin Page to Manage Booking Requests”, in this two-part tutorial here:
https://youtu.be/_hKsMICCfAM

To learn more about creating a quick-booking form with the Wix Bookings API visit:
https://www.wix.com/velo/example/Quick-Book-and-Pending-Appointments

About Velo:
Velo is an open development platform that lets you build advanced web applications. With serverless computing and hassle-free coding, you can manage all your content from integrated databases, add your own code in the built-in IDE or work in your own environment, and connect to 100s of APIs. Plus, you get total design freedom from the Wix Editor and optimized business applications—all in one integrated platform. Build, manage, deploy and scale your next web project with Velo.

Velo—Accelerated Development of Web Applications

About Wix:
Create a stunning, professional website.

With Wix, the possibilities are endless. You can create any kind of website for yourself or others. Choose a template or start from scratch. Push the limits with advanced design

today i’ll show you how to use the wix bookings api to create a quick booking form for your services and manage booking requests from your own admin page this tutorial is divided into two videos this video will focus on building your form so clients can book appointments for the current week before you begin make sure code is enabled next make sure you can accept online payments for your services then go to your service listing and add two
buttons with text like request consultation and admin request consultation will open the quickbooking form inside a lightbox the admin button will open your admin page where you can review approve or dismiss pending requests now use a lightbox for your form go to add light box and choose one you like next add fields so clients can enter their details go to add user input and choose an input element select the element and click set input type
under text settings choose placeholder text and change it to full name then from the properties panel change the id to name input add two more input elements for email address and age and change their ids to email input and age input respectively these ids will be used later in your code next add two drop-down input elements like the other user input elements go to add user input and choose two drop-down elements you’ll use the first drop-down to
display available dates for a given service change this placeholder text to pick a day then from the properties panel change the id to day picker from the second drop down clients will be able to pick an appointment time slot change this placeholder text to pick a time and change the id to slot picker you’ll use these ids later in your code next add text to the bottom of your form and include a message like some information is missing or
incorrect this way your clients will know if they’re missing info on their form change the id of this element to error message now add a checkbox go to add user input selection and choose a checkbox change the text to something like i accept the terms of service then select the checkbox and change its id to agreement checkbox this checkbox gives your clients the chance to accept your terms of service then add a submit button so clients can
complete their booking request add text to the button that tells clients what you want them to do like request consultation then change the button’s id to submit button all of these ids will be used later in your code now select all the elements in your form to group them then click group elements from the properties panel change the id of this group to form group this will make your form easier to work with when adding code lastly add a text
element for your thank you message when you’re done change the id to thank you text then select hidden on load this action hides your message until a client clicks the submit button now create a new database collection from the site structure sidebar on the left go to database click plus then new collection name the collection pending appointments under what’s this database collection for choose custom use from the drop-down and click set custom
permissions for the sake of this example we’ll simplify and choose any one for every field when creating your final site make sure to choose the right permissions for your case when you’re done click set and create collection this collection will be used to store pending requests which you’ll be able to view and manage from an admin page next set up each field in your collection first you’ll add fields that store your client info for now ignore
the title field click the plus here to add a new field under field name write email and make sure the type is text then click add add a field for name and another for age for the age field make sure to select number under field type next add a status field this field will show if an appointment is pending approved or dismissed since you won’t need the title field let’s remove it go to the email field and hover over the right side of the cell here
three dots will appear click on them to open a drop down menu and select set as primary field this field will automatically move to the left of the collection with a lock icon meaning it’s now your primary field then delete the title field hover over the right side of the title cell click on the dots and select move to trash from the drop down now it’s time to add your code select the light box and open the code panel at the bottom of your page
here then import two modules wix bookings and wix data wix bookings lets you check for available time slots in your bookings collection while wix data lets you check and add appointments to the pending appointments collection now add a global variable service id this variable stores a unique id for services in the pending appointments collection you’ll use this variable with the wix bookings module to check for service availability and book
appointments to find a service id go to your site structure sidebar under database click bookings and select services at the top of this collection click visible fields from the drop down check the service id box to make it visible in your collection then from the service id field choose the service you want to use for the quick booking form like free consultation right click on the cell here and click copy back in the code panel add or paste
your service id to the service id variable now you’ll be able to use this id with bookings api functions throughout your code next add another global variable slots map this variable stores open time slots now you’ll add code to get available dates and times for your service in the upcoming week clients will be able to view this info from the drop down menu in your quick booking form you may see some errors in the next few lines of code but
that’s okay you’ll be adding helper functions later on to resolve these in the on ready function add a variable today and assign it to new date this variable represents the current day then add an array days of the week in this array list all the days of the week you’ll use this array to populate the day picker drop down next assign the day picker property to the get weekdays function this function returns an array of the days of the week
starting from today you’ll write this function later using today as an argument for now map these days into a label using the days of the week array and a value label is how these days will appear to clients on the form and value is how these options will be referenced in your code next add an onchange event handler to the daypicker this event triggers when clients choose a day from the day pick or drop down then add the variable selected date to
create a date object from the event.target.value this object is based on the date clients choose use the find available slots function to populate the slot picker with open time slots for the selected date you’ll write this function later in your code then add an onclick event to the submit button and pass the validate and submit form function this function checks if clients have completed the form if the form is submitted correctly the function
will send a booking request to the pending appointments collection if not clients will see the error message now create an async function find available slots this function runs whenever a client selects an appointment date and lets you adapt open time slots according to the selected date add a date string argument then clear the global variable slots map next create a start date time variable using the get midnight function with date string add
another variable for end date time using the get next midnight function with date string these helper functions get the start and end time over a 24 hour period from the day a client selects you’ll write these functions later in your code then create an object options with start date time and end date time as properties bundling these properties into one object makes it easier to work with in your code now create an available slots variable use
the await command and call the function called get non-pending available slots with the global service id and options as parameters this function gets all available time slots for the client’s chosen date filtering out any pending appointments available slots will be assigned the result of the function or free appointment slots that will appear in the slot picker drop down for clients to choose from you’ll write a function for this later in your
code next create an if condition to check for available time slots use the options property to clear the slot picker array define the placeholder text as no sessions for this day then set the selected index to undefined and disable it now if a client selects a date with no availability they’ll see the message no sessions for this day the client will have to choose another date to continue with their booking then add an else statement this logic
is used when available times are found for a client selected date assign the slot picker options to available slots and map each slot add each slot to the global slots map with its slot dot underscore id as a key you’ll use this later in your code next create a new variable start time assign this variable to the start of each day using start date time as a property then add another variable time string assign it to the get time of day function
with start time as a parameter this helper function formats the time into am pm return each slot with a label assigned to time string and the value of the slot dot underscore id this loads the slot picker drop down with available time slots next add the placeholder text for this field pick a time reset selected index assign it as undefined and enable it now clients will be able to pick an available time for their booking then create an async
function validate and submit form this function runs when clients click the submit button additionally it checks if clients completed the form if the form is valid the function enters client details into the pending appointments collection as a new item for this function hide the error message text element the error message will only appear if the form is invalid then disable the submit button this will prevent clients from clicking submit during
the validation and form submission process next create the array form fields and add the ids for each user input element from the form then create a condition to validate the form fields array with the every method use dollar w with input inside a template literal to check if each field is valid if all the fields are valid the statement returns as true then you’ll add each field to the pending appointments collection as a new item next create a
slot variable and assign it to the slots map using the value of the slot’s picker as a reference this gives you the correct slot object from the slots map then create a new request and assign keys with matching inputs for example assign name with name input email with email input age with age input requested slot with the slot variable for status assign it to a string pending all the values from these inputs will appear in the pending
appointments collection as a booking request then type await and use wixdata.insert with the pending appointments collection and new request as parameters this makes the validation function wait until a booking request is added to the collection before continuing once the collection is updated with data for a new booking request the form group is hidden and your thank you text message appears next close the if statement and add an else statement
here you’ll show the error message and enable the submit button now if one of the form fields isn’t validated the error message text will appear telling clients to check their details and resubmit the form create another async function get non-pending available slots add requested service id and options as parameters this function will use the service id to return an array of all the available slots filtering out those that are pending approval
add a pending variable await the results from get pending appointments assign them to the variable and map each appointment to its requested slot id this gets the ids of all the appointments labeled pending in the pending appointments collection then create an available slots variable with the await command use wixbookings.getservice with requested service id and options as parameters this gets all open slots for the dates clients requested next
filter out all pending slots from available slots in the array this returns only open time slots for the client selected date preventing the possibility of double booking next create an async function get pending appointments set it to return the results from the wix data query of the pending appointments collection use find and items.filter to locate and filter the collection and return only items that have a pending status you’re done adding
the core functionality to your quickbooking form all you have left to write are a few date helper functions first add the get midnight function this function receives the date a client selects and returns midnight the beginning of that day then add the get next midnight function this function returns the beginning of the next day you’ll use these two functions to get the range of open time slots for a client selected date then create the get
weekdays function with start date as a parameter add an empty array for the weekdays next create a current variable and assign it to the get midnight function this variable represents the start of a day that the client selects then create a for loop that iterates seven times going over each day of the current week and adding it to the day picker drop down in the form this loop adds an underscore id and the current date value to the weekdays array
and restarts the next day using the get next midnight function when the loop finishes running it returns an array of the weekdays finally add a get time of day function using the javascript date function this receives a time and returns it formatted as am pm when populating the slot picker option now you’re all set go to your home page and select the request consultation button then link it to your quickbook lightbox click save then preview to
see your quick booking form in action from your service listing click request consultation to open the quick booking form then fill in your personal details pick a date from the drop down find a time that works for you and click on the check box to accept the terms of service when you’ve completed the form click request consultation your request has been submitted it will appear in your pending appointments collection as a new item under the
status field it’ll be labeled as pending until an admin you approve or dismiss the booking request check out the second video in this tutorial to learn how to create and manage your own admin page this video is always here so come back and watch it again whenever you need help you can also visit our documentation page for tutorials articles example code and more