Help Center
    Help Center
  1. Creating your site
  2. Advanced features
  3. CMS
  4. Using CMS with other Wix products
    5. CMS: Displaying Collection Content on Bookings Pages

CMS: Displaying Collection Content on Bookings Pages

10 min read
With the CMS (Content Management System), you can now display content from your collection directly on Wix Bookings pages. This gives you the ability to personalize and enhance your service listings with additional information, creating a richer experience for potential clients.

First, you create a CMS collection that references your Bookings Wix app collection. This is where you'll save the additional info you want to integrate into your Bookings pages. Next, you need to use Velo code to build custom Bookings pages. Then, set up the datasets on your page, connecting them to your Bookings Wix app collection and your CMS collection. Finally, connect supported elements like Rich Content to your CMS collection to display the additional information. 

This can be a game-changer for your online business. Imagine being a hair salon owner who wants to give customers a more in-depth look at your services. With this process, you can easily add extra, specific details about each service, right on your Bookings pages.
Important:
  • You must use Velo code to build custom Bookings pages.
  • Displaying CMS collection content on Bookings pages is not yet available in all Wix accounts. We're working on releasing this feature. 
Before you begin:

Step 1 | Create a collection that references your Wix app collection

  1. Create a Multiple items (Default) collection where you will keep the additional info you want to integrate into your Bookings pages. In this article, we'll call this your 'Details' collection. 
  2. In the collection, click + Add Item to add items for each service that you want to save additional details about. 
  3. Click + Add Field to add fields for each type of content you want to save (e.g. Rich Content). 
  4. Click the relevant cells to add your content to each item. 
  5. Add a Reference field type and connect it to the Bookings Wix app collection: 
    1. Click Manage Fields then click + Add Field. 
    2. Select Reference and click Choose Field Type.
      Tip: Select the Multi-reference field if you want to use an item's content for more than one service. 
    3. Enter the Field name.
    4. (Velo only) If necessary, update the Field ID, which is used in the site's code. You cannot update this ID later. 
    5. Click the Referenced Collection drop-down and select the relevant Wix App collection. For example, select Services under Bookings.
    6. (Optional) Enter help text to include a tooltip in your collection next to the field name.
    7. Click Save.
Screenshot of adding a reference field that references the Bookings Services Wix app collection.
  1. For each item, click the reference field and select the relevant service. You can select multiple services if you added a multi-reference field in the previous step. 
Screenshot of selecting the relevant Bookings services in the reference field.

Step 2 | Build custom Bookings pages

If you want to add more details from your CMS collection to your Bookings Service or Calendar page, you must convert them to custom pages. This involves adding code and using the Velo APIs. You only need to convert the Bookings pages in which you want to add details from your 'Details' collection. 

Click the relevant link below and follow the steps to build your custom Bookings page(s):

Step 3 | Set up the datasets on your page

Datasets link your page elements to the collection content so the elements can display your Bookings content. You need two datasets on your page, one connected to your Bookings Wix app collection, and the other connected to your 'Details' collection.

  • Wix app collection dataset: This reads content stored and managed within your Wix Bookings app, such as services. Add a URL slug filter to this dataset. You can connect supported elements to the dataset to show content from Wix Bookings.  
  • Details dataset: This reads the additional content you've stored about your services from your 'Details' CMS collection. Add a filter to this dataset that filters your reference or multi-reference field. Connect elements, such as the Rich Content element, to this dataset to display the additional content you've added to your 'Details' collection. 
Screenshot of the datasets needed on a Custom Booking Services page.
Wix Editor
Studio Editor
  1. Go to your editor.
  2. Go to the custom Bookings page where you want to show details from your CMS collection:
    Note: The following steps show you how to set this up on your Custom Service Page. Alternatively, you could choose to only show details from your CMS collection on your Custom Booking Calendar page instead. 
    1. Click Pages & Menu  on the left side of the editor.
    2. Click Bookings Pages and select the Custom Service Page. This page displays details about an individual service, with each service getting its own URL version of the page. Later, if needed, you can repeat this process for your Custom Booking Calendar page. After clients select the service that they want to book, they choose the date and time they want to book on the Custom Booking Calendar page. 
Screenshot of the Custom Booking pages created using Velo code.
  1. Add a dataset that connects to your 'Details' CMS collection:
    1. Click CMS  on the left. 
    2. Click Add Content Elements. 
    3. Click Dataset. 
    4. Click the Choose a collection drop-down and select your 'Details' collection. 
    5. Edit the Dataset name if needed and click Create. 
  2. (If you haven't already) Add a dataset that connects to your Bookings Wix app collection:
    1. Click Add a Dataset at the bottom of the panel on the right. 
    2. Click the Choose a collection drop-down and select the Services collection under Bookings. 
      Tip: Make sure to select Services under Bookings instead of under BookingsV2. If editing your Custom Booking Calendar page, select Calendar under Bookings.  
    3. Edit the Dataset name if needed and click Create.
Screenshot of connecting a dataset to the Bookings Wix app collection.
  1. Add a URL slug filter to your Services dataset:
    Tip: If editing your Custom Booking Calendar page, add a URL slug filter for your Calendar dataset. 
    1. Click the More Actions icon  next to your Services dataset and select Dataset settings.
    2. Click + Add Filter under Filter. 
    3. Click the Field drop-down and select Slug (Text). 
    4. Leave is selected as the Condition. 
    5. Under Value source, select URL Slug. 
    6. Click Add Filter. 
Screenshot of adding a URL Slug filter to the Services dataset.
  1. Add a reference filter to your 'Details' dataset:
    1. Click All page datasets at the top of the Dataset Settings panel on the right. 
    2. Click the More Actions icon  next to your 'Details' dataset and select Dataset settings.
    3. Click + Add Filter under Filter. 
    4. Click the Field drop-down, select your Reference (Services) field or Multi-Reference (Services) field, then click Add Filter. 
Screenshot of adding a reference filter to your 'Details' dataset.
  1. Add the supported elements that you want to display details from your CMS 'Details' collection. For example, you could add the Rich Content element to display the rich content fields from your 'Details' collection.
  2. Connect the elements to the relevant fields in your 'Details' dataset. 
  3. (If you haven't already) Add and connect elements to your Services dataset to display details from your Bookings Wix app collection. When editing your Custom Booking Calendar page, add and connect elements to your Calendar dataset. 
  4. (Optional) If you also want to display content from your 'Details' collection on your Booking Calendar page, repeat these steps for your Custom Booking Calendar page. 
  5. Click Preview at the top right and use the Preview toolbar to test the connections for the relevant services. 
  6. Publish your site when you are ready to make the changes go live. 

Did this help?

|
In this article
  • Step 1 | Create a collection that references your Wix app collection
  • Step 2 | Build custom Bookings pages
  • Step 3 | Set up the datasets on your page

Related content

CMS: Displaying Your Wix Stores Products on Any Page
CMS: Displaying Your Wix Stores Products on a Dynamic List Page
CMS: Adding Filters and Sorts to Datasets to Control Live Site Content
CMS: Displaying Your Wix Stores Categories on Any Page
CMS: Displaying Your Wix Stores Product Categories on a Dynamic List Page

Hire a Professional

Get matched with a Wix Partner who can help you reach your site goals.
Get Matched