5 min read
Available onAvailabilityBooking
You can customize widgets from the admin dashboard or directly from the embed. This is useful for displaying the same data in multiple formats, such as a website available in three languages. To simplify customization, parameters like language can be specified in the embed code, reducing the number of widgets needed.
| 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 booking form | boolean |
color_available | Color for available days | string<[0-F]{3,4,6,8}> |
color_booked | Color for booked days | string<[0-F]{3,4,6,8}> |
color_closed | Color for closed days | string<[0-F]{3,4,6,8}> |
color_error | Error color | string<[0-F]{3,4,6,8}> |
color_info | Information color | string<[0-F]{3,4,6,8}> |
color_primary | Primary color | string<[0-F]{3,4,6,8}> |
color_surface | Surface color | string<[0-F]{3,4,6,8}> |
color_tentative | Color for tentative days | string<[0-F]{3,4,6,8}> |
color_text | Text color | string<[0-F]{3,4,6,8}> |
color_unavailable | Color for unavailable days | string<[0-F]{3,4,6,8}> |
color_warning | Warning color | string<[0-F]{3,4,6,8}> |
| Parameter | Description | Values |
|---|---|---|
display_legend | Display a legend explaining the colors | boolean |
display_product_images | Display unit images above widget | boolean |
display_product_name | Display unit name above widget | boolean |
display_week_numbers | Display week numbers in the calendar | boolean |
first_week_contains_date | Date that must be included in the first week of a year | 1 |
interval_wrap_style | Style of the interval wrap | "square" |
number_of_months | Fix number of months to show next to each other | Positive integer |
rate_location | Where prices are displayed | "inline" |
rate_visibility | For which dates prices are displayed | "always" |
show_totals | Show total price when selecting dates | boolean |
show_yearly | Show yearly calendar instead of monthly calendar when possible | boolean |
size | Widget size | "compact" |
theme | Widget theme | "modern" |
week_starts_on | Day at which a week starts | 0 |
| Parameter | Description | Values |
|---|---|---|
display_legend | Display a legend explaining the colors | boolean |
display_product_covers | Display unit images next to their name | boolean |
display_product_details | Display unit details when selected | boolean |
display_weekdays | Display weekdays in the timeline | boolean |
limit_height | Limit height of the widget to show only a few units at a time | boolean |
rate_location | Where prices are displayed | "inline" |
rate_visibility | For which dates prices are displayed | "always" |
show_totals | Show total price when selecting dates | boolean |
size | Widget size | "responsive" |
theme | Widget theme | "modern" |
| Parameter | Description | Values |
|---|---|---|
autoselect_random_unit | Select a random unit within a group | boolean |
display_legend | Display a legend explaining the colors | boolean |
display_product_details | Display unit details when selected | boolean |
display_week_numbers | Display week numbers in the calendar | boolean |
first_week_contains_date | Date that must be included in the first week of a year | 1 |
grouping_attribute_id | Attribute to group units by | UUID |
interval_wrap_style | Style of the interval wrap | "square" |
number_of_months | Fix number of months to show next to each other | Positive integer |
rate_location | Where prices are displayed | "inline" |
rate_visibility | For which dates prices are displayed | "always" |
round_search_result_prices | Round prices in search results | boolean |
search_result_layout | Layout of the search results | "list" |
show_rates | Show rates for each unit | boolean |
show_unavailable_products | Show unavailable products | boolean |
show_yearly | Show yearly calendar instead of monthly calendar when possible | boolean |
size | Widget size | "compact" |
theme | Widget theme | "modern" |
week_starts_on | Day at which a week starts | 0 |
| Parameter | Description | Values |
|---|---|---|
autoselect_random_unit | Select a random unit within a group | boolean |
display_product_details | Display unit details when selected | boolean |
filters | Attributes to filter by | array<string> |
grouping_attribute_id | Attribute to group units by | string<UUID> |
rate_location | Where prices are displayed | "inline" |
rate_visibility | For which dates prices are displayed | "always" |
round_search_result_prices | Round prices in search results | boolean |
search_result_layout | Layout of the search results | "list" |
show_unavailable_products | Show unavailable products | boolean |
size | Widget size | "compact" |
To modify a widget, you'll have to change the embed code. For example, let's modify a widget to show week numbers. Then we can modify the embed code as follows:
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.Change displayWeekNumbers: false, to displayWeekNumbers: true,
Note that we use camelCase for parameter names hereThe 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 |
| Japanese | ja-JP |
| Lithuanian | lt-LT |
| Norwegian | no-NO |
| Portuguese | pt-BR |
| Romanian | ro-RO |
| Russian | ru-RU |
| Slovak | sk-SK |
| Spanish | es-ES |
| Ukranian | uk-UA |
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 |
| Brazilian Real | BRL |
| Belarusian Ruble | BYN |
| Canadian Dollar | CAD |
| Swiss Franc | CHF |
| Yuan Renminbi | CNY |
| Colombian Peso | COP |
| Czech Koruna | CZK |
| Danish Krone | DKK |
| Egyptian Pound | EGP |
| Euro | EUR |
| Pound Sterling | GBP |
| Hong Kong Dollar | HKD |
| Forint | HUF |
| New Israeli Sheqel | ILS |
| Indian Rupee | INR |
| Yen | JPY |
| Won | KRW |
| Mexican Peso | MXN |
| Malaysian Ringgit | MYR |
| Nigerian Naira | NGN |
| Norwegian Krone | NOK |
| New Zealand Dollar | NZD |
| Philippine Peso | PHP |
| Zloty | PLN |
| Romanian Leu | RON |
| Russian Ruble | RUB |
| Swedish Krona | SEK |
| Singapore Dollar | SGD |
| Baht | THB |
| Turkish Lira | TRY |
| New Taiwan Dollar | TWD |
| Hryvnia | UAH |
| US Dollar | USD |
| Rand | ZAR |
Last modified February 13, 2025