Booking Form Plugin

This document provides details on how to use the booking form script embedded in the HTML file.

Required Parameters

• apiUrl: (string) The URL of the API endpoint that the booking form will interact with. This parameter is mandatory for the script to function correctly.
  
  

Script Tag Parameters

These parameters are included in the <script> tag's data-tenant-config attribute:

• bookingPageUrl: (string) The URL of the booking page. Default is = apiUrl. (can be omitted).
• brand: (object) An object containing:
• primary: (string) The primary brand color. Default is '#1976d2'.
• secondary: (string) The secondary brand color. Default is '#dc004e'. (not uses yet)
• currency: (string) The currency code for the transaction. Default is 'GBP'.
• showDeposit: (boolean) Determines whether to show the deposit option. Default is true.
• showPriceBreakdown: (boolean) Indicates if the price breakdown should be displayed. Default is true.
• message: (object) An object containing:
• title: (string) The title of the message displayed in the booking form. Default is an empty string.
• text: (string) The text of the message displayed in the booking form. Default is an empty string.
• shortGuestSummary: (boolean) If set to true, a short summary of the guest information will be displayed. Default is false.
• useDatePicker: (boolean) Indicates whether to use a date picker for selecting dates. Default is false.
• blockBookedDatesOnEnquiry: (boolean) Controls whether already booked dates should be shown as blocked/unavailable in the enquiry form's date picker. Default is true.
• showPets: (boolean) Determines whether to show the pets option in the guest selector. Default is false.

Div Element Parameters

These parameters are included in the <div> element's attributes:

• data-property-id: (string) The ID of the property for which the booking is being made. This parameter is required.
• data-inquiry: (boolean) If set to true, the inquiry form will be shown. Default is true.
• data-block-booked-dates-on-enquiry: (boolean) Controls whether already booked dates should be shown as blocked/unavailable in the enquiry form's date picker. Default is true. When set to false, all dates appear available in the enquiry form.
• data-show-pets: (boolean) Determines whether to show the pets option in the guest selector. Default is false.

Example Usage

<script src="./dist/1.0.0/booking-form.iife.js" data-container-id="booking-container" data-tenant-config='{
  "apiUrl": "https://azores-dev5.iprostage.com/",
  "bookingPageUrl": "https://azores-dev5.iprostage.com/",
  "brand": {"primary": "#f7006b", "secondary": "#0066cc"},
  "currency": "USD",
  "showDeposit": false,
  "showPriceBreakdown": true,
  "blockBookedDatesOnEnquiry": true,
  "message": {
    "title": "Special Offer",
    "text": "Get 15% off when you book this month!"
  },
  "shortGuestSummary": true,
  "useDatePicker": true,
  "showPets": false
}'>
</script>

<!-- The container where the booking calendar will render -->
 <div class="wrapper" style="width: 550px;"> 
    <div id="booking-container" data-property-id="12047" data-inquiry="true" data-block-booked-dates-on-enquiry="true" data-show-pets="false"  > 
    </div>
 </div>