Setting up the Hostfully Booking Widget

Related Articles:
Using Booking Requests

Activating the Hostfully Channel
Setting up Your Custom Branding
Setting up the Hostfully Search Widget
Installing the Hostfully Plugin for Wordpress

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.

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

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

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

Once on the Widget Builder page,

you can customize your widget on the left side of the page
you can preview the widget on the right side of the page (fields, email and redirect behavior, colors, size)
the code to the right will change as you make customizations to your widget. 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. There is no save button, you will need to copy the code and paste into your website where you would like the widget to show.

There are couple fields in the Booking Widget Builder we would like to explain further:

Forward Email - all inquiries will be sent to the email address you list in your agency settings in Hostfully. If you would like the email to go to second email address, you can enter that here.

Redirect Link - (Only applies for instant booking) - you can redirect the user to a certain page at the end of the checkout process for their reservation. Please enter the link where you would like to direct them.

Note:

BEFORE dates are entered, the "From" price (in above screenshot) will be the nightly base price from main settings.
AFTER dates are entered, the price will be calculated based on the nightly rates of the input nights.

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

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

The widget handle 3 languages by default: English (US), French (FR) and Spanish (ES). 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, English or Spanish), 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

The Booking Widget can be adjusted for responsiveness and being accessible from mobile devices:

Please contact us if you need help setting your widget for mobile access and we can discuss a professional services contract. If you would like to engage your own web developer, that is always an option. The developer will need to look at our CSS structure and adjust it to work with your site.

Noted: When you update the widget options, the code needs to be updated. You can copy and paste the code to update it. If not, it may shows the wrong availability and pricing rules

Setting up the Hostfully Booking Widget

Key Benefits of the Hostfully Booking Widget

Setting up the Hostfully Booking Widget on your website

Adjusting the look and feel of the widget

Translating the widget

Making your widget responsive for mobile access