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 in Dutch (nl-NL) with a gray background color (`#ccc). Then we can modify the embed code as follows:
Standard / popup embeds
<div
data-bm="..."
data-locale="nl-NL"
data-background-color="#ccc"
/>
Note that we use kebab-case for parameter names here.
Popover / Side tab embeds
<script>
bmEmbeds.push({
id: "...",
layout: "...",
backgroundColor: "...",
color: "...",
label: "...",
params: {
locale: "nl-NL",
backgroundColor: "#ccc"
}
});
</script>
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 |
Czech | cs-CZ |
Dutch | nl-NL |
English | en-US |
French | fr-FR |
German | de-DE |
Hebrew | he-IL |
Italian | it-IT |
Portuguese | pt-BR |
Slovak | sk-SK |
Norwegian | no-NO |
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 |
Brazilian Real | BRL |
Canadian Dollar | CAD |
Swiss Franc | CHF |
Yuan Renminbi | CNY |
Czech Koruna | CZK |
Danish Krone | DKK |
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 |
Norwegian Krone | NOK |
New Zealand Dollar | NZD |
Zloty | PLN |
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 |
Updated on: 03/11/2022
Thank you!