Creating Booking Widget(s) for your own website

A comprehensive guide on building a booking widget for your own website which includes creating and visualizing listing calendar, getting a reservation quote, creating a Reservation in the FantasticStay system, updating the guest details, processing payment and updating the Reservation status

Introduction

Now more than ever, in a post COVID era, working towards building your own brand, differentiating yourself, and generating direct bookings is an important priority for a vast majority of property managers and hosts worldwide.

FantasticStay offers a few solutions to address these needs:

  1. Creating a basic, but free, booking website in a few clicks
  2. Creating a super professional, customizable and beautiful website in minutes (available as an add-on)
  3. Embedding FantasticStay Booking Widget(s) in your own website (under construction)
  4. Building your own Booking Widget(s) with FantasticStay APIs

In this guide we are going to focus on 4. Building your own Booking Widget(s) with FantasticStay APIs.

PROS:

  1. Full flexibility on code, user interface and design
  2. Complete integration with the FantasticStay PMS and Channel Manager
  3. Taking advantage of "Abandoned cart" functionalities

CONS:

  1. Requires significant development efforts on your side
  2. The FantasticStay APIs won't handle the Guest payment. Our system will expect you to handle payments or you could leverage our Payment requests feature (payment will be handled by FS but outside the Reservation flow on your website).

📘

Real-life example - HolidayLovers

To illustrate what can be build with these APIs please refer to HolidayLovers website. Here's an example Listing - The 3 Villas

Calendar Widget - Obtaining Availability, Rates and rules for a Listing

API Reference: Get a Listing Calendar

First step towards a professional booking experience for your Guests is to visualize the Listing Calendar.

1456

Example calendar available on the Holidaylovers.com website

FantasticStay API allows you to fetch all available days for a listing, along with daily pricing, minimum night stay requirements, changeover days and other booking rules and limitations.

1288

Reservation - Get a quote

API Reference: Get a Reservation quote

After successfully guiding your potential Guest to select available and bookable dates usually it's time to show him a Quote. FantasticStay API will return:

  • Base price
  • Cleaning fee and other applicable fees for your Listing
  • Taxes
  • Payment schedules
818

Starting the Reservation flow

Just after showing Listing availability, Guest selecting them and receiving a quote it's time to start the actual Reservation Flow.

API Reference: Create a NEW Reservation

This endpoint creates a Reservation in FantasticStay system with status “new”. In the above mentioned example of HolidayLover’s website the endpoint is triggered immediately after a visitor clicks the “Reserve” button on the Calendar widget.

At this point only the check-in/out dates and reservation financial information is saved in the Reservation object and thus the reservation is simply with the status "new". Note the Reservations with status "new" can also be access and viewed via the Reservations tab in FantasticStay.

This is useful (as seen below) to construct “abandoned cart” feature and collect as much guest information as possible before confirming the booking. The reservations with status “new” can be used for further marketing and re-marketing activities.

Updating Guest details along with the Reservation flow

API Reference: Update Guest details

At this point the system has a record of the reservation with status "new". The reservation holds financial information, the number of guests and the check-in and check-out dates. Now it's time to start saving the actual Guest details.

This endpoint allows you to update the details one by one.

2406

This is especially useful if you imagine a scenario where a potential Guest starts the reservation flow, enters his email address and then for some reason don't complete the remaining steps of the reservation. If you create async requests to update the Guest details with this endpoint when the guests enters his details, one by one, you are effectively saving his details in the FantasticStay Reservation and you will be able to use the data on a later stage.

📘

Advise: Build your Reservation form so the Guest contacts are at the beginning

Having the information about who started to book your property, along with his contact details and financial information will enable you to do targeted marketing campaigns, re-marketing for abandoned carts (unfinished reservations) and much more.

Update Reservation Status and Finalize

API Reference: Update Reservation status

At this point you have created a Reservation and you've updated the guest details. Now it's time to finalize the reservation, as it's still in status "new" in our system. At this step you can also create an Inbox thread in FantasticStay and save the first message of the Guest to it, so later you can communicate via our Inbox.

Request to book (RTB) mode

In a Request to Book (RTB) scenario this will be the final step of our flow and the endpoint will update the Reservation to status "Pending". The endpoint will automatically do this after you call it and whether or not the Listing is on RTB or IB (Instant booking) will depend on your Settings in FantasticStay.

Instant booking (IB) mode

API Reference: Confirm a Reservation

In an Instant Booking scenario our system will expect this endpoint to be called from your website and by doing so we are going to update the Reservation's status to "Accepted".

Handling Payments

🚧

Your Website or Application is expected to handle Payments

It's critical to note that this scenario doesn't cover payment details collection or payment processing. You should handle this on your side or alternatively you can rely on Payment requests which can be sent both manually and automatically from FantasticStay.