5 min lezen

# Embed customization

## Widget embed code customization

You can customize widgets from the admin dashboard or directly from the embed. This is useful for displaying the same data in multiple formats, such as a website available in three languages. To simplify customization, parameters like language can be specified in the embed code, reducing the number of widgets needed.

## 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](#supported-currencies) |
| `font` | Font used to display the widget | Font name from Google Fonts |
| `locale` | Language used to display the widget | Supported [language](#supported-languages) |
| `stay_expanded` | Always show the booking form | `boolean` |
| `color_available` | Color for available days | `string<[0-F]{3,4,6,8}>` |
| `color_booked` | Color for booked days | `string<[0-F]{3,4,6,8}>` |
| `color_closed` | Color for closed days | `string<[0-F]{3,4,6,8}>` |
| `color_error` | Error color | `string<[0-F]{3,4,6,8}>` |
| `color_info` | Information color | `string<[0-F]{3,4,6,8}>` |
| `color_primary` | Primary color | `string<[0-F]{3,4,6,8}>` |
| `color_surface` | Surface color | `string<[0-F]{3,4,6,8}>` |
| `color_tentative` | Color for tentative days | `string<[0-F]{3,4,6,8}>` |
| `color_text` | Text color | `string<[0-F]{3,4,6,8}>` |
| `color_unavailable` | Color for unavailable days | `string<[0-F]{3,4,6,8}>` |
| `color_warning` | Warning color | `string<[0-F]{3,4,6,8}>` |

### Calendar widgets

| Parameter | Description | Values |
| --- | --- | --- |
| `display_legend` | Display a legend explaining the colors | `boolean` |
| `display_product_images` | Display unit images above widget | `boolean` |
| `display_product_name` | Display unit name above widget | `boolean` |
| `display_week_numbers` | Display week numbers in the calendar | `boolean` |
| `first_week_contains_date` | Date that must be included in the first week of a year | `1` |
| `interval_wrap_style` | Style of the interval wrap | `"square"` |
| `number_of_months` | Fix number of months to show next to each other | Positive integer |
| `rate_location` | Where prices are displayed | `"inline"` |
| `rate_visibility` | For which dates prices are displayed | `"always"` |
| `show_totals` | Show total price when selecting dates | `boolean` |
| `show_yearly` | Show yearly calendar instead of monthly calendar when possible | `boolean` |
| `size` | Widget size | `"compact"` |
| `theme` | Widget theme | `"modern"` |
| `week_starts_on` | Day at which a week starts | `0` |

### Timeline widgets

| Parameter | Description | Values |
| --- | --- | --- |
| `display_legend` | Display a legend explaining the colors | `boolean` |
| `display_product_covers` | Display unit images next to their name | `boolean` |
| `display_product_details` | Display unit details when selected | `boolean` |
| `display_weekdays` | Display weekdays in the timeline | `boolean` |
| `limit_height` | Limit height of the widget to show only a few units at a time | `boolean` |
| `rate_location` | Where prices are displayed | `"inline"` |
| `rate_visibility` | For which dates prices are displayed | `"always"` |
| `show_totals` | Show total price when selecting dates | `boolean` |
| `size` | Widget size | `"responsive"` |
| `theme` | Widget theme | `"modern"` |

### Inventory widgets

| Parameter | Description | Values |
| --- | --- | --- |
| `autoselect_random_unit` | Select a random unit within a group | `boolean` |
| `display_legend` | Display a legend explaining the colors | `boolean` |
| `display_product_details` | Display unit details when selected | `boolean` |
| `display_week_numbers` | Display week numbers in the calendar | `boolean` |
| `first_week_contains_date` | Date that must be included in the first week of a year | `1` |
| `grouping_attribute_id` | Attribute to group units by | `UUID` |
| `interval_wrap_style` | Style of the interval wrap | `"square"` |
| `number_of_months` | Fix number of months to show next to each other | Positive integer |
| `rate_location` | Where prices are displayed | `"inline"` |
| `rate_visibility` | For which dates prices are displayed | `"always"` |
| `round_search_result_prices` | Round prices in search results | `boolean` |
| `search_result_layout` | Layout of the search results | `"list"` |
| `show_rates` | Show rates for each unit | `boolean` |
| `show_unavailable_products` | Show unavailable products | `boolean` |
| `show_yearly` | Show yearly calendar instead of monthly calendar when possible | `boolean` |
| `size` | Widget size | `"compact"` |
| `theme` | Widget theme | `"modern"` |
| `week_starts_on` | Day at which a week starts | `0` |

### Search widgets

| Parameter | Description | Values |
| --- | --- | --- |
| `autoselect_random_unit` | Select a random unit within a group | `boolean` |
| `display_product_details` | Display unit details when selected | `boolean` |
| `filters` | Attributes to filter by | `array<string>` |
| `grouping_attribute_id` | Attribute to group units by | `string<UUID>` |
| `rate_location` | Where prices are displayed | `"inline"` |
| `rate_visibility` | For which dates prices are displayed | `"always"` |
| `round_search_result_prices` | Round prices in search results | `boolean` |
| `search_result_layout` | Layout of the search results | `"list"` |
| `show_unavailable_products` | Show unavailable products | `boolean` |
| `size` | Widget size | `"compact"` |

## Modifying embed codes

To modify a widget, you'll have to change the embed code. For example, let's modify a widget to show week numbers. Then we can modify the embed code as follows:

### Standard

Change `display_week_numbers=false` to `display_week_numbers=true`

> Note that we use `snake_case` for parameter names here.

### Popup

Change `data-display-week-numbers="false"` to `data-display-week-numbers="true"`

> Note that we use `kebab-case` for parameter names here.

### Popover & Side tab

Change `displayWeekNumbers: false,` to `displayWeekNumbers: true,`

> 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` |
| 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` |
| Japanese | `ja-JP` |
| Lithuanian | `lt-LT` |
| Norwegian | `no-NO` |
| Portuguese | `pt-BR` |
| Romanian | `ro-RO` |
| Russian | `ru-RU` |
| Slovak | `sk-SK` |
| Spanish | `es-ES` |
| Ukranian | `uk-UA` |

## 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` |
| Belarusian Ruble | `BYN` |
| Canadian Dollar | `CAD` |
| Swiss Franc | `CHF` |
| Yuan Renminbi | `CNY` |
| Colombian Peso | `COP` |
| Czech Koruna | `CZK` |
| Danish Krone | `DKK` |
| Egyptian Pound | `EGP` |
| 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` |
| Malaysian Ringgit | `MYR` |
| Nigerian Naira | `NGN` |
| Norwegian Krone | `NOK` |
| New Zealand Dollar | `NZD` |
| Philippine Peso | `PHP` |
| Zloty | `PLN` |
| Romanian Leu | `RON` |
| 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` |

Laatst gewijzigd 8 december 2025