Customizing widgets via the embed code
Widget embed code customization
Besides customizing widgets from the admin dashboard, you can customize them directly from the embed code. 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
Parameter | Description | Values |
---|---|---|
start | Initially selected enquiry start | string<Date> |
end | Initially selected enquiry end | string<Date> |
guests | Initially selected number of guests | Positive integer |
currency | Currency used to display prices | Supported currency |
font | Font used to display the widget | Font name from Google Fonts |
locale | Language used to display the widget | Supported language |
stay_expanded | Always show the enquiry form | boolean |
Calendar widgets
Parameter | Description | Values |
---|---|---|
available_color | Color for available days | string<#[0-F]{3,4,6,8}> |
background_color | Color for widget background | string<#[0-F]{3,4,6,8}> |
tentative_color | Color for days with pending availability | string<#[0-F]{3,4,6,8}> |
text_color | Color for text in widget | string<#[0-F]{3,4,6,8}> |
unavailable_color | Color for unavailable days | string<#[0-F]{3,4,6,8}> |
display_legend | Display a legend explaining the colors | boolean |
display_product_images | Display rental images above widget | boolean |
display_product_name | Display rental name above widget | boolean |
display_week_numbers | Display week numbers in the calendar | boolean |
number_of_months | Fix number of months to show next to each other | Positive integer |
size | Widget size | regular, compact |
theme | Widget theme | modern, classic |
first_week_contains_date | Date that must be included in the first week of a year | 1, 2, 3, 4, 5, 6, 7 |
week_starts_on | Day at which a week starts | 0 (Sunday), 1 (Monday) |
Timeline widgets
Parameter | Description | Values |
---|---|---|
available_color | Color for available days | string<#[0-F]{3,4,6,8}> |
background_color | Color for widget background | string<#[0-F]{3,4,6,8}> |
tentative_color | Color for days with pending availability | string<#[0-F]{3,4,6,8}> |
text_color | Color for text in widget | string<#[0-F]{3,4,6,8}> |
unavailable_color | Color for unavailable days | string<#[0-F]{3,4,6,8}> |
display_legend | Display a legend explaining the colors | boolean |
display_product_covers | Display rental images next to their name | boolean |
display_weekdays | Display weekdays in the timeline | boolean |
number_of_months | Fix number of months to show next to each other | Positive integer |
size | Widget size | responsive, wide, compact |
theme | Widget theme | modern, classic |
Inventory widgets
Parameter | Description | Values |
---|---|---|
available_color | Color used when all rentals are available for some period | string<#[0-F]{3,4,6,8}> |
background_color | Color for widget background | string<#[0-F]{3,4,6,8}> |
text_color | Color for text in widget | string<#[0-F]{3,4,6,8}> |
unavailable_color | Color used when no rental is available for some period | string<#[0-F]{3,4,6,8}> |
display_legend | Display a legend explaining the colors | boolean |
display_week_numbers | Display week numbers in the calendar | boolean |
number_of_months | Fix number of months to show next to each other | Positive integer |
size | Widget size | regular, compact |
theme | Widget theme | modern, classic |
first_week_contains_date | Date that must be included in the first week of a year | 1, 2, 3, 4, 5, 6, 7 |
week_starts_on | Day at which a week starts | 0 (Sunday), 1 (Monday) |
Search widgets
Parameter | Description | Values |
---|---|---|
accent_color | Color used for accents | string<#[0-F]{3,4,6,8}> |
background_color | Color for widget background | string<#[0-F]{3,4,6,8}> |
text_color | Color for text in widget | string<#[0-F]{3,4,6,8}> |
unavailable_color | Color used for errors and unavailable days | string<#[0-F]{3,4,6,8}> |
size | Widget size | small, regular |
display_tag_filter | Allow guests to filter results by tag | boolean |
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.
Popup
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:
Language | Locale |
---|---|
Basque | eu-ES |
Belarusian | be-BY |
Croatian | hr-HR |
Czech | cs-CZ |
Danish | da-DK |
Dutch | nl-NL |
English | en-US |
French | fr-FR |
German | de-DE |
Hebrew | he-IL |
Hungarian | hu-HU |
Italian | it-IT |
Lithuanian | lt-LT |
Norwegian | no-NO |
Portuguese | pt-BR |
Romanian | ro-RO |
Russian | ru-RU |
Slovak | sk-SK |
Spanish | es-ES |
Ukranian | uk-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.
Currency | Code |
---|---|
Argentine Peso | ARS |
Australian Dollar | AUD |
Baht | THB |
Belarusian Ruble | BYN |
Brazilian Real | BRL |
Canadian Dollar | CAD |
Czech Koruna | CZK |
Danish Krone | DKK |
Egyptian Pound | EGP |
Euro | EUR |
Hryvnia | UAH |
Hong Kong Dollar | HKD |
Forint | HUF |
Indian Rupee | INR |
Malaysian Ringgit | MYR |
Mexican Peso | MXN |
New Israeli Sheqel | ILS |
New Taiwan Dollar | TWD |
New Zealand Dollar | NZD |
Norwegian Krone | NOK |
Pound Sterling | GBP |
Rand | ZAR |
Romanian Leu | RON |
Russian Ruble | RUB |
Swedish Krona | SEK |
Swiss Franc | CHF |
Singapore Dollar | SGD |
Turkish Lira | TRY |
US Dollar | USD |
Won | KRW |
Yen | JPY |
Yuan Renminbi | CNY |
Zloty | PLN |
Updated on: 20/04/2023
Thank you!