5 min read
Available onAvailabilityBooking
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.
| 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 |
| 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) |
| 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 |
| 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) |
| 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 |
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:
Change display_week_numbers=false to display_week_numbers=true
Note that we use
snake_casefor parameter names here.
Change data-display-week-numbers="false" to data-display-week-numbers="true"
Note that we use
kebab-casefor parameter names here.
Change displayWeekNumbers: false, to displayWeekNumbers: true,
Note that we use
camelCasefor parameter names here
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!
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 |
| Philippine Pesos | PHP |
Last modified June 17, 2024