Custom Booking Widget

Guide to Configuring and Customizing the Booking Widget

The following guide will help you integrate and customize the RentalWise Booking Widget for your custom website. This widget allows your guests to use your existing website to select dates, input booking details, and then proceed to finalize their booking on a RentalWise powered website checkout page.

The default booking widget code can be found HERE.

Mandatory Modifications

Before using the widget, you must configure the following:

1. 1. Instance

• Update the instance attribute to match your RentalWise subdomain.

• Example:
  My Workspace name is Bluehouse.rentalwise.io

• instance="https://bluehouse.rentalwise.io"

1. 2. Identifier

• Replace the identifier with the unique identifier of the property.

• The identifier can be found in the iCal feed of the property.(PMS - Distribution - Export iCal)

• Example:

• identifier="213422e4389b81c0e7dc27868bd491c9e2efab51"

1. 3. Property ID

• Replace the property-id with the specific ID of the property.

• This ID is available in your PMS (Property Management Software) or iCal.

• Example:

• property-id="877344"

Once these three attributes are configured, the widget will be functional for your property.

Additional Customization Options

You can customize various elements of the widget to match your preferences and branding. Below are the available options:

1. RW-WIDGET

• Default Settings:

  • The date format will always be YYYY/MM/DD.

  • The calendar cannot be configured to start on Sunday or Saturday; it defaults to Monday through Saturday (Mon-San).

• To Preselect Search Parameters:
  You can add predefined search parameters to generate a quote automatically.
  Example:

• <rw-widget instance="https://your-subdomain.rentalwise.io" identifier="your-property-unique-identifier" property-id="your-property-id" start-date="2024-12-10" end-date="2024-12-14" adults="5" coupon="Happy"> </rw-widget>

2. RW-QUOTE-DATERANGE-INPUT

• Customizable Options:

  • Label: Set a custom label for the date picker.
    Example: label="Book your Dates"

  • Placeholder: Add placeholder text for the date input.
    Example: placeholder="Select a date"

  • Calendar Placement: Configure the placement of the calendar popup. Options: top, left, right, bottom.
    Example: calendar-placement="top"

  • Locale: Change the calendar language. Available options include German, Portuguese, Spanish, French, Italian, Dutch, and Greek.
    Example: locale="French"

  • Date Format: By default, it is YYYY/MM/DD. Refer to Date-Fns Documentation for more options.

Example:

<rw-quote-daterange-input label="Book your Dates" placeholder="Add a date" calendar-placement="bottom" locale="Spanish"> </rw-quote-daterange-input>

3. RW-QUOTE-GUESTS-INPUT

• Customizable Options:

  • Adults Label: Set a custom label for adults.
    Example: adults-label="Guests"

  • Children Label: Set a custom label for children.
    Example: children-label="Kids"

Example:

<rw-quote-guests-input adults-label="Guests" children-label="Kids"> </rw-quote-guests-input>

4. RW-QUOTE-COUPON-INPUT

• Customizable Options:

  • Label: Set a custom label for coupon input.
    Example: label="Discounts"

  • Placeholder: Add placeholder text for coupon entry.
    Example: placeholder="Enter coupon code"

Example:

<rw-quote-coupon-input label="Discounts" placeholder="Enter coupon code"> </rw-quote-coupon-input>

5. RW-QUOTE-RESULT

The <rw-quote-result> tag displays details once a quote is generated. You can customize the following elements:

• Products: Displays quote components like accommodation and cleaning fees.

• Total: Displays the total price of the booking.

• Book Button: Takes the user to your RentalWise website to finalize the booking.

Example:

<rw-quote-result> <div> <rw-quote-products></rw-quote-products> <rw-quote-total></rw-quote-total> <rw-quote-book-button label="Request"></rw-quote-book-button> </div> </rw-quote-result>

6. RW-QUOTE-ERROR

Use the <rw-quote-error> tag to display errors, if any, during the quote generation process.

Example:

<rw-quote-error></rw-quote-error>

7. RW-QUOTE-NO-RESULTS

Customize the message displayed when no quote is generated.

Example:

<rw-quote-no-results> <div style="text-align: center; margin-top: 20px;">Please select your dates</div> </rw-quote-no-results>

8. RW-QUOTE-IS-LOADING

Customize the message displayed while the quote is loading.

Example:

<rw-quote-is-loading> <div style="text-align: center; margin-top: 20px;">Loading quote</div> </rw-quote-is-loading>

Summary

• Configure the Instance, Identifier, and Property ID for proper widget functionality.

• Customize the additional options, such as date inputs, labels, placeholders, and messages, to match your website’s branding and guest experience.

• Use preselected parameters for automatic quote generation, if desired.

This guide ensures seamless integration and customization of the Booking Widget for your website.