Example App: Next Booking Availability Plugin


Clone our example plugin app, explore how it's built, and play around with its design and code.

In this example, we built a plugin that users can add to their site on Wix Bookings' Service page. It displays the date of the nearest booking availability for the particular service shown on the page.



Explore the app:

  • In Blocks, you can select the widget's text element to see how its design and layout are set up.
  • In the code panel, you can review the widget's code, including the widget's business logic and use of APIs.

Once you clone the example app and open it in Wix Blocks, it is a fully functioning app. You can always undo or go back to a previous version if you’ve messed something up while playing around with it.

How we built it

Widget elements

  • Text element (#text1): Displays the next availability date

Code workflow

  1. Handle the widget's onPropsChanged() event.
  2. Retrieve the current bookingsServiceId from the host widget via the plugin's API.
  3. Get the service's availability using Wix Bookings' getServiceAvailability() API.
  4. Populate the widget's text element.

Head over to our tutorial and build this plugin yourself in a few simple steps.

APIs We used

Widget code

Copy
1
import wixBookingsFrontend from 'wix-bookings-frontend';
2


3
$widget.onPropsChanged(async (oldProps, newProps) => {
4
    const serviceId = newProps.bookingsServiceId; // get the current service ID from the host widget
5


6
    let startRange = new Date();
7
    let endRange = new Date();
8
    endRange.setDate(startRange.getDate() + 365); // one year from now
9
    const rangeOptions = {
10
        startDateTime: startRange,
11
        endDateTime: endRange
12
    };
13
    // get the service availability for the upcoming year
14
    const availability = await wixBookingsFrontend.getServiceAvailability(serviceId, rangeOptions);
15
    const slots = availability.slots;
16


17
    // get the date of the first available slot
18
    const options = { weekday: 'long', day: 'numeric', month: 'short' };
19
    const firstSlotDate = slots[0].startDateTime.toLocaleDateString('en-US', options);
20


21
    $w('#text1').text = "Next availability: " + firstSlotDate; // set the text element's content 
22
});
Was this helpful?
Yes
No