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