Velo: Build a custom Booking Service page

You can 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

To integrate the page into your site’s booking flow and implement its functionality, you need to add code to the page and use Velo APIs.

Your code has to do several things:

  • Get data about the selected service.
  • Handle UI initialization and interactions.
  • Implement any customized business logic.
  • Direct users to the next page in the flow.

Step 1 | Add a custom Service page to your site

To create a custom Service page, do one of the following:

Wix Editor
  1. Turn on Dev Mode.
  2. Click Pages on the left side of the Editor.
  3. Click Bookings Pages, and then on the Service Page page, click .
  4. Click Replace with custom page.
  5. In the confirmation panel, click Replace.

Wix Studio
  1. Turn on Dev Mode by clicking and then Start Coding from the sidebar on the left side of the Editor.
  2. Click Pages on the sidebar.
  3. On the Service Page (under Bookings Pages), click the More Actions icon .
  4. Click Replace with custom page.
  5. In the confirmation panel, click Replace.

Step 2 | Design your custom page

Add elements to the page to create your business’s customized design and functionality, such as text, buttons, and images.

At a minimum, these elements must:

  • Display information about the selected service.
  • Provide an action button that navigates to the next page in the flow (usually the Booking Calendar).

Step 3 | Add Velo code to your page

  1. Use the getAppPageData() function to get the service object associated with the page.

For example:

Copy
1
import wixWindow from 'wix-window';
2
import wixLocation from 'wix-location';
3


4
$w.onReady(async function () {
5
    const pageData = await wixWindow.getAppPageData();
6
    const serviceName = pageData.service.name;
7
    $w('#text1').text = serviceName;
8
});

Note: To receive a populated page data object using getAppPageData() when testing your code, do the following:

  • Create at least one Bookings service.
  • Preview the Service page and then return to the editor.

  1. Depending on the functionality you’re developing, implement any business logic that your customized page requires.

  2. Add an event handler to the page’s action button so that it navigates to the next page in the flow, which is typically your site’s Booking Calendar. You can create a link to a Booking Calendar with preset values.

Note: Courses do not need a Booking Calendar. Their service page should navigate directly to the Booking Form.

For example:

Copy
1
$w('#nextButton').onClick(() => {
2
    const serviceSlug = pageData.service.supportedSlugs[0].name;
3
    const nextUrl = `/booking-calendar/${serviceSlug}`;
4
    wixLocation.to(nextUrl);
5
})

Your custom page can now display the service’s data and direct site visitors to the next page in the booking flow.

Was this helpful?
Yes
No