> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Build a Custom Booking Service Page
## Article: Build a custom Booking Service page
## Article Link: https://dev.wix.com/docs/develop-websites/articles/wix-apps/wix-app-collections/wix-bookings/build-a-custom-booking-service-page.md
## Article Content:
# Velo: Build a Custom Booking Service Page
You can replace your site’s default [Wix Bookings Service page](https://support.wix.com/en/article/wix-bookings-customizing-your-service-pages) 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](https://support.wix.com/en/article/about-wix-bookings-pages) 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 Studio
1. 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**.
Wix Editor
1. Turn on [Dev Mode](https://support.wix.com/en/article/about-velo-by-wix#to-enable-velo-on-your-site).
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**.
## Step 2 | Design your custom page
[Add elements to the page](https://support.wix.com/en/article/wix-editor-adding-and-deleting-elements) 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()`](https://www.wix.com/velo/reference/wix-window-frontend/getapppagedata) function to get the [service object](https://www.wix.com/velo/reference/wix-window-frontend/app-page-data#wix-window-frontend_app-page-data_booking-service-page) associated with the page.
For example:
``` ts
import wixWindowFrontend from 'wix-window-frontend';
import wixLocation from 'wix-location';
$w.onReady(async function () {
const pageData = await wixWindowFrontend.getAppPageData();
const serviceName = pageData.service.name;
$w('#text1').text = serviceName;
});
```
> **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.
2. Depending on the functionality you’re developing, implement any business logic that your customized page requires.
3. Add an [event handler](https://support.wix.com/en/article/velo-reacting-to-user-actions-using-events) 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](https://www.wix.com/velo/reference/wix-bookings/shareable-booking-form-links) with preset values.
> **Note**: Courses do not need a Booking Calendar. Their service page should [navigate directly to the Booking Form](https://www.wix.com/velo/reference/wix-bookings-frontend/shareable-booking-form-links).
For example:
```ts
$w('#nextButton').onClick(() => {
const serviceSlug = pageData.service.supportedSlugs[0].name;
const nextUrl = `/booking-calendar/${serviceSlug}`;
wixLocation.to(nextUrl);
})
```
Your custom page can now display the service’s data and direct site visitors to the next page in the booking flow.