Embed customization

Available onAvailabilityBooking

Widget embed code customization

Besides customizing widgets from the admin dashboard, you can customize them directly from the embed code as well. This is useful in scenarios where you want to show the same data in multiple formats. For example, if your website is available in 3 languages, you probably want to show the same availability data in these different languages as well. You could create and maintain 3 separate widgets, one for each language, but that quickly becomes cumbersome. To ease customization, we allow parameters such as language to be specified in the embed code. This way, you need fewer widgets.

Available parameters

All widgets

ParameterDescriptionValues
startInitially selected enquiry startstring<Date>
endInitially selected enquiry endstring<Date>
guestsInitially selected number of guestsPositive integer
currencyCurrency used to display pricesSupported currency
fontFont used to display the widgetFont name from Google Fonts
localeLanguage used to display the widgetSupported language
stay_expandedAlways show the enquiry formboolean

Calendar widgets

ParameterDescriptionValues
available_colorColor for available daysstring<#[0-F]{3,4,6,8}>
background_colorColor for widget backgroundstring<#[0-F]{3,4,6,8}>
tentative_colorColor for days with pending availabilitystring<#[0-F]{3,4,6,8}>
text_colorColor for text in widgetstring<#[0-F]{3,4,6,8}>
unavailable_colorColor for unavailable daysstring<#[0-F]{3,4,6,8}>
display_legendDisplay a legend explaining the colorsboolean
display_product_imagesDisplay rental images above widgetboolean
display_product_nameDisplay rental name above widgetboolean
display_week_numbersDisplay week numbers in the calendarboolean
number_of_monthsFix number of months to show next to each otherPositive integer
sizeWidget sizeregular, compact
themeWidget thememodern, classic
first_week_contains_dateDate that must be included in the first week of a year1, 2, 3, 4, 5, 6, 7
week_starts_onDay at which a week starts0 (Sunday), 1 (Monday)

Timeline widgets

ParameterDescriptionValues
available_colorColor for available daysstring<#[0-F]{3,4,6,8}>
background_colorColor for widget backgroundstring<#[0-F]{3,4,6,8}>
tentative_colorColor for days with pending availabilitystring<#[0-F]{3,4,6,8}>
text_colorColor for text in widgetstring<#[0-F]{3,4,6,8}>
unavailable_colorColor for unavailable daysstring<#[0-F]{3,4,6,8}>
display_legendDisplay a legend explaining the colorsboolean
display_product_coversDisplay rental images next to their nameboolean
display_weekdaysDisplay weekdays in the timelineboolean
number_of_monthsFix number of months to show next to each otherPositive integer
sizeWidget sizeresponsive, wide, compact
themeWidget thememodern, classic

Inventory widgets

ParameterDescriptionValues
available_colorColor used when all rentals are available for some periodstring<#[0-F]{3,4,6,8}>
background_colorColor for widget backgroundstring<#[0-F]{3,4,6,8}>
text_colorColor for text in widgetstring<#[0-F]{3,4,6,8}>
unavailable_colorColor used when no rental is available for some periodstring<#[0-F]{3,4,6,8}>
display_legendDisplay a legend explaining the colorsboolean
display_week_numbersDisplay week numbers in the calendarboolean
number_of_monthsFix number of months to show next to each otherPositive integer
sizeWidget sizeregular, compact
themeWidget thememodern, classic
first_week_contains_dateDate that must be included in the first week of a year1, 2, 3, 4, 5, 6, 7
week_starts_onDay at which a week starts0 (Sunday), 1 (Monday)

Search widgets

ParameterDescriptionValues
accent_colorColor used for accentsstring<#[0-F]{3,4,6,8}>
background_colorColor for widget backgroundstring<#[0-F]{3,4,6,8}>
text_colorColor for text in widgetstring<#[0-F]{3,4,6,8}>
unavailable_colorColor used for errors and unavailable daysstring<#[0-F]{3,4,6,8}>
sizeWidget sizesmall, regular
display_tag_filterAllow guests to filter results by tagboolean

Modifying embed codes

To modify a widget, you'll have to change the embed code. For example, let's modify a widget to show weeknumbers. Then we can modify the embed code as follows:

Standard

Change display_week_numbers=false to display_week_numbers=true

Note that we use snake_case for parameter names here.

Change data-display-week-numbers="false" to data-display-week-numbers="true"

Note that we use kebab-case for parameter names here.

Popover & Side tab

Change displayWeekNumbers: false, to displayWeekNumbers: true,

Note that we use camelCase for parameter names here

Supported languages

The widgets can be shown in a variety of languages:

LanguageLocale
Basqueeu-ES
Belarusianbe-BY
Croatianhr-HR
Czechcs-CZ
Danishda-DK
Dutchnl-NL
Englishen-US
Frenchfr-FR
Germande-DE
Hebrewhe-IL
Hungarianhu-HU
Italianit-IT
Lithuanianlt-LT
Norwegianno-NO
Portuguesept-BR
Romanianro-RO
Russianru-RU
Slovaksk-SK
Spanishes-ES
Ukranianuk-UA

🙏 A big thanks to our users who submitted their language.

🌎 Do you also want to submit your language? Fill in this sheet!

Supported currencies

The widgets can be shown in a variety of currencies. To show correct prices in all these currencies, we track exchange rates on a daily basis.

CurrencyCode
Argentine PesoARS
Australian DollarAUD
BahtTHB
Belarusian RubleBYN
Brazilian RealBRL
Canadian DollarCAD
Czech KorunaCZK
Danish KroneDKK
Egyptian PoundEGP
EuroEUR
HryvniaUAH
Hong Kong DollarHKD
ForintHUF
Indian RupeeINR
Malaysian RinggitMYR
Mexican PesoMXN
New Israeli SheqelILS
New Taiwan DollarTWD
New Zealand DollarNZD
Norwegian KroneNOK
Pound SterlingGBP
RandZAR
Romanian LeuRON
Russian RubleRUB
Swedish KronaSEK
Swiss FrancCHF
Singapore DollarSGD
Turkish LiraTRY
US DollarUSD
WonKRW
YenJPY
Yuan RenminbiCNY
ZlotyPLN
Philippine PesosPHP

Last modified June 17, 2024

On this page

Widget embed code customizationAvailable parametersAll widgetsCalendar widgetsTimeline widgetsInventory widgetsSearch widgetsModifying embed codesStandardPopupPopover & Side tabSupported languagesSupported currencies