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 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.
Customizing and Installing the widget
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:
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
Translating the widget
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 the 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.