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 the Hostfully Search 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 on 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. 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.

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 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

Making your widget responsive for mobile access

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.