Tutorial: Build a Custom Booking Service Page

In this tutorial, you'll learn how to replace your site's default Wix Bookings Service page with your own customized version. This enables you to modify or extend the page's functionality to suit your precise business needs.

By the end of this tutorial, you'll have a functional custom service page that displays service information, navigates visitors to the booking calendar, and seamlessly integrates into your site's booking flow.

Follow these steps to build the custom booking service page:

1. Add a custom service page to your site
2. Design your custom service page
3. Add code to your custom page

Before you begin

It's important to note the following points before doing this tutorial:

• You need to have Wix Bookings installed on your site with at least 1 service created.

Step 1 | Add a custom service page to your site

In this step, you'll replace the default Wix Bookings Service page with a custom version that you can fully control and customize.

At the end of this step, you'll have a blank custom service page ready for design and coding.

To create a custom service page:

Step 2 | Design your custom page

In this step, you'll design the layout and add the necessary elements to your custom service page.

At the end of this step, you'll have a page with all the visual elements needed to display service information and provide navigation to the next step in the booking flow.

To design your custom page:

1. Add elements to the page to create your business's customized design and functionality. Make sure to include the following elements:

   • Text elements to display the service name and details such as descriptions or pricing information.
   • Button element to navigate to the calendar page in the booking flow.

2. Give your elements meaningful IDs that you'll use in your code, such as:

   • #serviceName for the service name text.
   • #serviceDescription for the service details.
   • #nextButton for the navigation button.

Step 3 | Add code to your custom page

In this step, you'll add code that connects your custom page to your booking service's data. The code below retrieves information about the service, initializes the elements on the page, and directs visitors to the next step in the booking flow.

At the end of this step, you'll have a functional custom service page that displays service information and navigates users to the booking calendar.

To retrieve and display the service data with code:

1. Add the following import statements at the top of your page code:

   Copy

2. Call the Get App Page Data method to get the service object associated with the page. The code below retrieves the service name and initializes the page's text element with the service name.

   Copy

3. Add an event handler to the page's action button so that it navigates to the next page in the flow, which is typically the Booking Calendar. You can [create a link to a Booking Calendar](https://dev.wix.com/docs/sdk/ frontend-modules/bookings/shareable-booking-calendar-links) with preset values.

   Copy

4. Add any business logic that your customized page may require. For example, you might want to display service descriptions, pricing, or availability information.

Complete example code

Here's the complete code for your custom service page:

Congratulations! You've successfully created a custom booking service page that integrates seamlessly with your site's booking flow.

You can continue to enhance this page by adding more service details, custom styling, or additional business logic based on your specific requirements.