How to Build a Custom Booking System on Wix Using Velo
- Wix Crafters
- Apr 28
- 3 min read
🎯 Introduction
Many Wix website owners rely on the default Wix Bookings app to manage appointments. While it works well for basic needs, it often lacks the flexibility required by service businesses with specific scheduling rules, pricing models, or confirmation workflows. A custom booking system built with Wix Velo gives you full control over available slots, pricing, booking rules, and confirmation emails. This approach suits salons, clinics, tutors, photographers, consultants, and other service providers who want a tailored experience for their clients and staff.
Creating your own booking system means you can adapt it as your business grows, add unique features, and integrate payments or notifications exactly how you want. This guide walks you through building a complete custom booking system on Wix using Velo, from database setup to sending confirmation emails.
🛠️ What You Will Build
By following this tutorial, you will create a booking system with these features:
A booking form where clients select a service, date, and time slot
Real-time availability checks to prevent double bookings
Automatic booking confirmation emails sent to clients and admins
Optional payment integration to collect fees upfront
An admin view to see all bookings and their statuses
This system will give you a flexible foundation to customize further based on your business needs.
✅ Prerequisites
Before starting, make sure you have:
Wix Dev Mode enabled on your site to access Velo coding features
Basic knowledge of JavaScript and Wix APIs
Familiarity with Wix database collections to store booking data
Wix Triggered Emails set up for sending confirmation messages
If you’re new to any of these, Wix’s official documentation offers helpful introductions.
📦 Step 1 — Database Collections
The backbone of your booking system is the database. You will create two collections:
Bookings Collection
Fields:
`clientName` (text)
`service` (text)
`date` (date)
`timeSlot` (text)
`status` (text, e.g., "confirmed", "pending")
`email` (text)
This collection stores all client bookings.
Availability Collection
Fields:
`date` (date)
`timeSlot` (text)
`isBooked` (boolean)
This collection tracks which time slots are available or already booked for each date.
Create these collections in your Wix dashboard under Content Manager. Set permissions so that site visitors can read availability but only submit bookings through your form.
🎨 Step 2 — Booking Form UI
Design a simple booking form on your Wix page with these elements and IDs:
Dropdown for service selection: `#serviceDropdown`
Date picker: `#datePicker`
Dropdown for time slots: `#timeSlotDropdown`
Text input for client name: `#nameInput`
Text input for email: `#emailInput`
Button to submit booking: `#bookBtn`
Text element to show confirmation messages: `#confirmMessage`
Arrange these elements clearly so users can easily select their options and submit the form.
💻 Step 3 — Check Availability
When a user selects a date, your code should query the Availability collection to find all time slots for that date where `isBooked` is false. Then populate the `#timeSlotDropdown` with only those available slots.
Use the Wix Data API with a query filter like:
```javascript
wixData.query("Availability")
.eq("date", selectedDate)
.eq("isBooked", false)
.find()
.then(results => {
// populate #timeSlotDropdown with results.items
});
```
This ensures clients cannot select already booked slots.
🔗 Step 4 — Save Booking
When the user clicks the book button, validate all fields to ensure no empty inputs. Then:
Check availability again to avoid double booking.
Insert a new record into the Bookings collection with the client’s details.
Update the Availability collection to mark the selected time slot as booked.
Show a success message in `#confirmMessage`.
Example code snippet:
```javascript
$w("#bookBtn").onClick(() => {
// Validate inputs
// Query Availability to confirm slot is free
// Insert booking into Bookings collection
// Update Availability to set isBooked = true
// Show confirmation message
});
```
This process keeps your data consistent and prevents conflicts.
📧 Step 5 — Confirmation Email
Set up a Wix Triggered Email template in your dashboard with placeholders for booking details like client name, service, date, and time.
After successfully inserting a booking, call the triggered email API:
```javascript
import { triggeredEmails } from 'wix-crm-backend';
triggeredEmails.emailContact("bookingConfirmation", contactId, {
variables: {
clientName: clientName,
service: service,
date: date,
timeSlot: timeSlot
}
});
```
Send this email to both the client and your admin email to keep everyone informed.
🐛 Common Issues
| Issue | Solution |
|--------------------|--------------------------------------------------|
| Double booking | Always check availability before inserting booking |
| Email not sending | Verify triggered email template is published |
| Slots not loading | Ensure Availability collection has correct data |
| Form not submitting| Validate all required fields before submission |
💡 Pro Tips
Add a cancellation feature by letting clients update or delete bookings, updating availability accordingly.
Use custom pricing rules by adding price fields to your services and calculating totals dynamically.
Integrate payment gateways like Wix Payments or PayPal to collect fees during booking.
Create an admin dashboard page to filter and manage bookings easily.
Use Wix automations to send reminders before appointments.
Comments