Booking Form Plugin Technical Guide

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 the same as the value given for apiURL. (can be omitted). Leave this blank or remove entirely unless you are using your own checkout pages and not iPRO checkout pages.
  
  
• brand:(object) An object containing:

  primary: (string) The primary brand color. Default is '#1976d2'.

  secondary: (string) The secondary brand color. Default is '#dc004e'.
  
  

• currency: (string) The currency code for the transaction. Default is 'GBP'.
  
  
• showDeposit: (boolean) Determines whether to show the Security Deposit in the booking summary. Default is true.
  
  
• showPriceBreakdown: (boolean) Indicates if the price breakdown should be displayed. Default is true.
  
  
• showPayableToday: (boolean) Controls whether to show the Payable Today amount in the booking summary. 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.
  
  
• showWishlist: (boolean) If true, displays a heart toggle (Like/Unlike) that adds/removes the current data-property-id to a shared wishlist array in localStorage. Default is false.
  
  
• showEnquiryFormOnly: (boolean) If true, displays only the enquiry form instead of the booking form. The enquiry form will appear directly on the page without a modal. Default is false.
  
  
• changeoverStyle:(string) Controls the visual style of changeover days (allowed check-in/check-out days) on the calendar. Options are:

  "circle" (default): Displays a circular border around changeover days

  "bold": Makes the date number bold for changeover days

  "underlined": Underlines the date number for changeover days

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.
  
  
• data-show-enquiry-form-properties: (boolean) If set to true, displays a properties field in the enquiry form allowing users to select multiple properties. Default is false.

Example Usage

Enquiry Form Only Mode

To display only the enquiry form (without the booking form and without a modal), set showEnquiryFormOnly to true:

 <script src="https://ipro-plugins.pages.dev/plugins/booking-form/latest/booking-form.iife.js" 

data-container-id="enquiry-container" data-tenant-config='{

  "apiUrl": "https://azores-dev5.iprostage.com/",

  "brand": {"primary": "#f7006b", "secondary": "#0066cc"},

  "currency": "USD",

  "showEnquiryFormOnly": true,

  "blockBookedDatesOnEnquiry": true,

  "showPets": false

}'>

</script>

<!-- The container where the enquiry form will render directly -->

 <div class="wrapper" style="width: 550px;"> 

    <div id="enquiry-container" data-property-id="12047" data-inquiry="true" data-block-booked-dates-on-enquiry="true" data-show-pets="false" data-show-enquiry-form-properties="false"  > 

    </div>

 </div>

If you are first generating this code from the generators in the guide, please ensure the Java Script file in the <script src= is the following:
 <script src="https://ipro-plugins.pages.dev/plugins/booking-form/latest/booking-form.iife.js" 

And not
<script src="./dist/0.0.1/booking-form.iife.js"