Tutorial | Create a Site Plugin for the Wix Bookings Service Page

In this tutorial, we demonstrate how to create the Next Booking Availability site plugin for the Wix Bookings Service page. This site plugin displays the next available date for a site visitor to book a particular service. It is meant to be embedded in the Wix Bookings Service page slot.

The end result will look something like this:

We use the following steps to build the Next Booking Availability site plugin:

1. Create an app.
2. Design your plugin in Wix Blocks.
3. Code your plugin in Wix Blocks.

Before you begin

• Make sure you're logged into your Wix account, or create an account if you don't have one yet.
• If you haven't done so yet, move to the new Wix Studio workspace by joining Wix Studio.

Step 1 | Open the Wix Studio workspace and create an app

You can access Wix Blocks through the Wix Studio workspace.

1. Open the Wix Studio workspace.
2. Click Custom Apps in the left menu.
3. Click Create New App and then select Build from scratch.
4. When prompted to choose a framework, select Wix Blocks.
   Your newly-created app opens in Wix Blocks.

Step 2 | Design your plugin’s UI

We now design our plugin in Wix Blocks:

1. Open the Widgets and Design panel, click , and select Add Plugin.

2. In the Add a plugin panel, set up the plugin as follows:

   • Plugin name: Next Availability
   • Which Wix app does it extend?: Wix Bookings
   • Slots this plugin can be added to: slot 1 (Service Page)

3. Click Create.

4. Let's add a text element to the plugin.
   Click Add Elements on the left side of the editor, and then click Title.

5. Next, we want to make sure that the text stretches across the entire width of the plugin. When the plugin is added to a site, we want the text to stretch across the entire width of the Wix Service page slot.
   Select the text element. In the Inspector panel on the right, click the Layout tab, and set the element's width to 100%.

   See how it looks

   

6. Still in the Inspector panel, click the Design tab, and set the text alignment to Center align.

Step 3 | Code your plugin

We now write the code for our plugin. The code checks the availability of a specific service for the upcoming year, and updates the text element with the next available date for a site visitor to book the service.

1. Before coding our plugin, we need to connect our plugin to the host widget (in our case, the Wix Bookings Service page) by implementing the BOOKINGS_SERVICE API.
   To do so, add the bookingsServiceId property to your plugin's public API.
   In the code panel, click the Widget Public API icon, and then click Add New Property.

   See how it looks

   

2. In the New Property panel, name the property bookingsServiceId, and then click Create.

3. In the code editor, add the following import statement at the beginning of your code to use Wix Bookings APIs:
   import wixBookingsFrontend from 'wix-bookings-frontend';

4. Make the $widget.onPropsChanged() function asynchronous by adding the async keyword:
   $widget.onPropsChanged(async (oldProps, newProps) => {

5. Inside the $widget.onPropsChanged() code block, add the following line to get the current service ID from the host widget:
   const serviceId = newProps.bookingsServiceId;

   This ID identifies the service for which the availability will be checked.

6. Set up the date range for our availability query, with a startRange and an endRange that spans one year from the current date:

   Copy

7. Use the Wix Bookings getServiceAvailability() API to query the availability for the specified service (serviceId) within the defined date range (rangeOptions):

   Copy

8. Extract the available slots from the returned object and get the first available slot's date:

   Copy

9. Change our text element to display the message "Next availability:" followed by the formatted date of the first available slot:

   Copy

   Here's the complete code:

   Copy

10. In the top-right corner, click Build. When prompted to provide an app name, enter "Booking Availability" and then click Save & Continue.

11. When prompted to select the type of version to build, select Test version.

Our plugin is now ready for use. In the next step, we add our plugin to a site to see it in action.

Step 4 | See your plugin in action

Plugins that you develop are immediately available for installation on your own sites, using the plugin explorer in the editors.

Go ahead and create a new site, and then install Wix Bookings. Alternatively, use this site template, which already has Wix Bookings installed.

1. Open your editor. In the left sidebar, click Pages , and go to Booking Pages > Service Page.

2. On the Service page, click the page's widget, and then click the Plugins icon.

   See how it looks

   

   Your plugin should appear in the plugin explorer.

3. Hover over your plugin, and then click Add.
   When prompted for consent, select the checkbox and click Agree & Add.

Once you install your plugin on a site, you can preview or publish the site to test the plugin's functionality and make sure it's working properly.