Setting up the Hostfully Booking Widget

Related Articles:
Activating the Hostfully Channel
Using Booking Requests
Installing the Hostfully Plugin for Wordpress
Setting up the Hostfully Booking Widget
Setting up Your Custom Branding

The Hostfully Booking Widget provides property managers with the ability to capture bookings directly from their website, and allows for a seamless integration of the powerful Hostfully Booking Engine into any HTML-compatible website.

If your website is a Wordpress website, please see this article instead.

Key Benefits of the Hostfully Booking Widget 

• the widget can work on any HTML website
• the widget will show and enforce booking rules
• the widget will compute and display rates coming from your dynamic pricing tool, if you have one set up
• the widget will show any currency
• the widget can block dates that are already booked
• the widget can be set in inquiry mode or instant booking mode
• the instant booking mode can trigger the full booking flow, including the approval of  rental agreements, digital signatures, marketplace upsell, and more
• the widget's look and feel can be adjusted, the text can be translated

Setting up the Hostfully Booking Widget on your website

You can start setting up your widget from the Publishing Tools menu. 

1. On the Publishing Tools page, select any Property at top, 
2. and then click on the link "Create your own widget here" to access the widget builder:

Once of the Widget Builder page, 

1. you can customize your widget on the left side of the page: 
2. you can preview the widget on the right side of the page (fields, email and redirect behavior, colors, size) 
3. once the widget has the customizations you like, copy the code from the code snippet window and paste that code into your website, where you would like your widget to show:

Adjusting the look and feel of the widget

You can adjust the look and feel of the widget beyond the customizations that can be applied from the widget builder. This will require some advanced knowledge of HTML and CSS.

.leadWidget > form.orbirental-capture-widget-form {
	font-size:14px;
} 

Example for updating the font size

Translating the widget

The Hostfully Booking Widget can be translated in any language.
 Here's an example of the booking widget translated to French:

The widget handle 2 languages by default: English (US) and French (FR). To setup the lang, update the option "lang" inside your configurations:

var widget = new Widget(
  'leadWidget',
  '[PROPERTY_UID]', {
    "type":"agency",
    "fields":["phone"],
    "showAvailability":true,
    "lang":"FR",
    "minStay":true,
    "price":true,
     ...
});

Example of configuration for a French widget

If you want to add a new language (other than French or English), you can customize your own labels. You will have to create a configuration and set it to the option "lang"

var lang = {
    "placeholder" : {
        "checkIn" : "Check-in",
        "checkOut" : "Check-out",
        "guests" : "Guests",
        "email" : "Email",
        "name" : "Name",
        "phone" : "Phone",
        "notes" : "Enter a brief message"
    },
    "label" : {
        "stay" : "Min stay: %D% nights",
        "guests" : "guests",
        "nights" : "nights",
        "thanks" : "Thank You!"
    },
    i18n: {
        previousMonth : 'Previous Month',
        nextMonth     : 'Next Month',
        months        : ['January','February','March','April','May','June','July','August','September','October','November','December'],
        weekdays      : ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
        weekdaysShort : ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
    }
}

var widget = new Widget(
  'leadWidget',
  '[PROPERTY_UID]', {
    "type":"agency",
    "fields":["phone"],
    "showAvailability":true,
    "lang":lang,
    "minStay":true,
    "price":true,
     ...
});

Example of custom lang configuration