Setting up the Hostfully Search Widget

The Hostfully Search Widget allows prospective guests to search through your open inventory. The Hostfully Platform provides ways to customize the widget and embed it into your website. The widget will then redirect your prospective guests to the Hostfully listing site, which can also be customized with your own branding.

Website Compatibility

The Hostfully Search Widget is compatible with any website build over standard HTML and Javascript technologies, such as Worpdress, Wix, Squarespace or any other custom website.

Your can customize the Hostfully Search Widget from the Publishing Tools' search widget page:

Setting background transparence

The Hostfully Search Widget can be displayed over a background image on your website. If you use this option, make sure to check the box "Transparent Background" before copying to code snippet.

Setting the background color

If you prefer not using transparency, then you will be able to adjust the background color of the widget using the color picker (you will need to have the box "Transparent Background" un-checked:

Adding location dropdown

If you offer properties in more than one location, you can choose this option as in above screenshot. Afterwards, your guests can search by location on the search widget.

Copying and pasting the widget code snippet on your website

Once customized to your liking, copy the code snippet at the bottom of the page and paste it in your website template:

Advanced customization

The Hostfully Search Widget can be translated in any language.

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 SearchWidget('searchwidget', 'https://sandbox.hostfully.com/vacation-rental-agency/dijon', );

var widget = new SearchWidget(
  'searchwidget',
  '[PROPERTY_UID]',
  '[AGENCY_URL]', {
    "lang":"FR",
    "maximumGuests":30
    "daysBetweenDates":7
    }
});

Example of configuration for a French widget

CSS customization

We have found sometimes additional CSS customization on your website is needed. For example, for those using the Genesis Framework for WordPress, the following changes have been helpful:

To help with the formatting of the calendar boxes, try adding:

.pika-button {
padding: 5px !important;
}

To help with the formatting on mobile, try adding:

.hostfully-search-widget-form > div { 
flex: 0 1 20% !important; 
}

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.

Setting up the Hostfully Search Widget

Website Compatibility

Customizing and Installing the widget

Advanced customization

Translating the widget

CSS customization