Articles on: Embedding & Widgets

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



ParameterDescriptionValues
startInitially selected enquiry startstring<Date>
endInitially selected enquiry endstring<Date>
guestsInitially selected number of guestsPositive integer
currencyCurrency used to display pricesSupported currency
fontFont used to display the widgetFont name from Google Fonts
localeLanguage used to display the widgetSupported language
stay_expandedAlways show the enquiry formboolean


Calendar widgets



ParameterDescriptionValues
available_colorColor for available daysstring<#[0-F]{3,4,6,8}>
background_colorColor for widget backgroundstring<#[0-F]{3,4,6,8}>
tentative_colorColor for days with pending availabilitystring<#[0-F]{3,4,6,8}>
text_colorColor for text in widgetstring<#[0-F]{3,4,6,8}>
unavailable_colorColor for unavailable daysstring<#[0-F]{3,4,6,8}>
display_legendDisplay a legend explaining the colorsboolean
display_product_imagesDisplay rental images above widgetboolean
display_product_nameDisplay rental name above widgetboolean
display_week_numbersDisplay week numbers in the calendarboolean
number_of_monthsFix number of months to show next to each otherPositive integer
sizeWidget sizeregular, compact
themeWidget thememodern, classic
first_week_contains_dateDate that must be included in the first week of a year1, 2, 3, 4, 5, 6, 7
week_starts_onDay at which a week starts0 (Sunday), 1 (Monday)


Timeline widgets



ParameterDescriptionValues
available_colorColor for available daysstring<#[0-F]{3,4,6,8}>
background_colorColor for widget backgroundstring<#[0-F]{3,4,6,8}>
tentative_colorColor for days with pending availabilitystring<#[0-F]{3,4,6,8}>
text_colorColor for text in widgetstring<#[0-F]{3,4,6,8}>
unavailable_colorColor for unavailable daysstring<#[0-F]{3,4,6,8}>
display_legendDisplay a legend explaining the colorsboolean
display_product_coversDisplay rental images next to their nameboolean
display_weekdaysDisplay weekdays in the timelineboolean
number_of_monthsFix number of months to show next to each otherPositive integer
sizeWidget sizeresponsive, wide, compact
themeWidget thememodern, classic


Inventory widgets



ParameterDescriptionValues
available_colorColor used when all rentals are available for some periodstring<#[0-F]{3,4,6,8}>
background_colorColor for widget backgroundstring<#[0-F]{3,4,6,8}>
text_colorColor for text in widgetstring<#[0-F]{3,4,6,8}>
unavailable_colorColor used when no rental is available for some periodstring<#[0-F]{3,4,6,8}>
display_legendDisplay a legend explaining the colorsboolean
display_week_numbersDisplay week numbers in the calendarboolean
number_of_monthsFix number of months to show next to each otherPositive integer
sizeWidget sizeregular, compact
themeWidget thememodern, classic
first_week_contains_dateDate that must be included in the first week of a year1, 2, 3, 4, 5, 6, 7
week_starts_onDay at which a week starts0 (Sunday), 1 (Monday)


Search widgets



ParameterDescriptionValues
accent_colorColor used for accentsstring<#[0-F]{3,4,6,8}>
background_colorColor for widget backgroundstring<#[0-F]{3,4,6,8}>
text_colorColor for text in widgetstring<#[0-F]{3,4,6,8}>
unavailable_colorColor used for errors and unavailable daysstring<#[0-F]{3,4,6,8}>
sizeWidget sizesmall, regular
display_tag_filterAllow guests to filter results by tagboolean


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:

LanguageLocale
Basqueeu-ES
Czechcs-CZ
Dutchnl-NL
Englishen-US
Frenchfr-FR
Germande-DE
Hebrewhe-IL
Italianit-IT
Portuguesept-BR
Slovaksk-SK
Norwegianno-NO
Spanishes-ES
Ukranianuk-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.

CurrencyCode
Argentine PesoARS
Australian DollarAUD
Brazilian RealBRL
Canadian DollarCAD
Swiss FrancCHF
Yuan RenminbiCNY
Czech KorunaCZK
Danish KroneDKK
EuroEUR
Pound SterlingGBP
Hong Kong DollarHKD
ForintHUF
New Israeli SheqelILS
Indian RupeeINR
YenJPY
WonKRW
Mexican PesoMXN
Norwegian KroneNOK
New Zealand DollarNZD
ZlotyPLN
Russian RubleRUB
Swedish KronaSEK
Singapore DollarSGD
BahtTHB
Turkish LiraTRY
New Taiwan DollarTWD
HryvniaUAH
US DollarUSD
RandZAR

Updated on: 03/11/2022

Was this article helpful?

Share your feedback

Cancel

Thank you!