Booking widget parameters control how a widget looks and which booking page it opens. Use them when you need something the widget designer doesn't offer, such as a fixed room, a tracking referrer or your own colours.
Required skills: HTML and CSS.
Add a parameter to your widget code
Generate the widget in Settings > Booking Engine > Booking Widgets and click Get Code. Add each parameter as name:value, inside the bookWidget({ ... }) block. Put text values in single quotes.
$('#bookWidget-44005-75744-0-1589444240').bookWidget({
propid:75744,
formAction:'https://beds24.com/booking.php',
widgetLang:'en',
widgetType:'BookingStrip',
buttonTitle:'Book now'
});To style a widget with your own CSS, use your browser's developer tools to find the class names used in the widget.
Parameters for all widgets
| Parameter | Values | Description |
|---|---|---|
| alignment |
left, right, center
|
Alignment of the widget content. |
| backgroundColor | Hex code or any valid CSS colour | Widget background colour. |
| borderColor | Hex code or any valid CSS colour | Widget border colour. |
| boxShadow |
true, false
|
Shows a shadow around the widget. |
| buttonBackgroundColor | Hex code or any valid CSS colour | Button background colour. |
| buttonColor | Hex code or any valid CSS colour | Button text colour. |
| buttonTitle | Text | Button text. |
| color | Hex code or any valid CSS colour | Text colour. |
| customParameter | Text | Adds the text to the booking page URL. For example, customParameter:'hideroom=12345' hides room 12345 on the booking page, and customParameter:'br1-12345=book' skips the booking page and opens checkout for room 12345. See Skip to the checkout page. |
| dateFormat | Any date format supported by the jQuery UI datepicker | Format of the displayed dates. |
| dateSelection |
0 = check-in only1 = check-in and check-out2 = check-in and number of nights3 = check-in, check-out and number of nights |
Which date fields the guest fills in. |
| dayNamesMin | List of seven names, starting with Sunday, e.g. ["Su","Mo","Tu","We","Th","Fr","Sa"]
|
Day-of-week headings in the datepicker. |
| defaultNightsAdvance | Number (0 = today) |
How many days ahead of today the preselected check-in date is. |
| defaultNumAdult | Number | Preselected number of adults. |
| defaultNumChild | Number | Preselected number of children. |
| defaultNumNight | Number | Preselected number of nights. |
| fontSize | Size in px or % | Text size. |
| formAction | URL | The page the widget opens when the guest clicks the button (the form's action attribute). |
| formTarget | Any valid HTML target, e.g. _blank
|
Where that page opens (the form's target attribute). |
| group | Text | Opens the booking page for this group. |
| loadJQueryUI |
true, false
|
Set to false to stop the widget loading its own copy of jQuery UI. See Load jQuery UI yourself. |
| maxNumNight | Number | Maximum number of nights. |
| minNumNight | Number | Minimum number of nights. |
| noExternalFonts |
true, false
|
Set to true to stop the widget loading external fonts. |
| noGroup | Text | Opens the booking page with this group removed. |
| ownerid | Owner ID | Opens the booking page showing all properties and rooms for this owner. |
| peopleSelection |
0 = none1 = guests2 = adults and children |
How the guest selects the number of people. |
| propid | Property ID | Opens the booking page showing this property. |
| referer | Text | Saved with every booking made through this widget, so you can track where bookings come from. |
| roomid | Room ID | Opens the booking page showing this room. |
| showLabels |
true, false
|
Shows or hides the field labels. |
| weekFirstDay |
0 = Sunday, 1 = Monday, 2 = Tuesday, 3 = Wednesday, 4 = Thursday, 5 = Friday, 6 = Saturday |
First day of the week in the datepicker. |
| widgetLang | Language code, e.g. en, de, sv
|
Widget language. Uses the same codes as the booking page lang parameter in Booking page developer options. |
| widgetTitle | Text | Title shown on the widget. |
| widgetType |
BookingBox, BookingBoxMini, BookingStrip, AvailabilityCalendar
|
Type of widget. |
| width | Size in px or % | Width of the widget. |
Parameters for the availability calendar
| Parameter | Values | Description |
|---|---|---|
| availableBackgroundColor | Hex code or any valid CSS colour | Background colour of available dates. |
| availableColor | Hex code or any valid CSS colour | Text colour of available dates. |
| numMonth | Number | Number of months shown. |
| pastBackgroundColor | Hex code or any valid CSS colour | Background colour of past dates. |
| pastColor | Hex code or any valid CSS colour | Text colour of past dates. |
| requestBackgroundColor | Hex code or any valid CSS colour | Background colour of request dates. |
| requestColor | Hex code or any valid CSS colour | Text colour of request dates. |
| unavailableBackgroundColor | Hex code or any valid CSS colour | Background colour of unavailable dates. |
| unavailableColor | Hex code or any valid CSS colour | Text colour of unavailable dates. |
Parameters for multiple-property search
| Parameter | Values | Description |
|---|---|---|
| searchShow |
hide, show
|
hide opens the search criteria from a link; show keeps them visible. |
| searchLinkText | Text | Text of the link that opens the search criteria. |