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 per widget type

Calendar widget

backgroundColor: hex color string
textColor: hex color string
availableColor: hex color string
tentativeColor: hex color string
unavailableColor: hex color string
theme: classic or modern
numberOfMonths: Number of months shown next to each other (integer > 0)
displayProductName: true or false
size: regular or compact
locale: Any supported locale (e.g. en-US or nl-NL)
weekStartsOn: Day at which the week should start (0: Sunday, 1: Monday)
displayWeekNumbers: true or false
firstWeekContainsDate: Date that must be included in the first week of a year (1 - 7)

Overview widget

backgroundColor: hex color string
textColor: hex color string
borderColor: hex color string
weekendColor: hex color string
tentativeColor: hex color string
unavailableColor: hex color string
displayProductCovers: true or false
locale: Any supported locale (e.g. en-US or nl-NL)

Inventory widget

backgroundColor: hex color string
textColor: hex color string
availableColor: hex color string
unavailableColor: hex color string
theme: classic or modern
numberOfMonths: Number of months shown next to each other (integer > 0)
displayProductName: true or false
size: regular or compact
locale: Any supported locale (e.g. en-US or nl-NL)
weekStartsOn: Day at which the week should start (0: Sunday, 1: Monday)
displayWeekNumbers: true or false
firstWeekContainsDate: Date that must be included in the first week of a year (1 - 7)

Enquiry widget

backgroundColor: hex color string
accentColor: hex color string
submittedMessage: text shown when someone submits an enquiry
locale: Any supported locale (e.g. en-US or nl-NL)

How to modify the embed codes with these parameters

So how can you use these parameters to modify our widgets?
For example, let's say we want to display our widget in Dutch (nl-NL) instead of English (en-US), then we can modify the embed codes as follows:

Standard / popup embeds

<div
  data-bm="..."
  data-locale="nl-NL"
/>

Popover / Side tab embeds

<script>
  bmEmbeds.push({
    id: "...",
    layout: "...",
    backgroundColor: "...",
    color: "...",
    label: "...",
    params: {
      locale: "nl-NL"
    }
  });
</script>

Supported locales

The calendars can be shown in a variety of languages. While the dashboard of Bookingmood is currently available in Dutch, English, French and German, the widgets are available in a lot more languages.

Language	Locale
Basque	eu-ES
Czech	cs-CZ
Dutch	nl-NL
English	en-US
French	fr-FR
German	de-DE
Hebrew	he-IL
Spanish	es-ES
Norwegian	no-NO
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!

Updated on: 17 / 08 / 2022