Advanced options

Description:
Add the following tags and the script tag to your web site.
An up-to-date availability calendar will be shown.
Live example:
Used html for this example: Parameters:
name="youraccountname" enter your account name.
obj="0" the accommodation nr, starting at zero (0).
fnr="000" enter the application number (000/001/002/..) if you have more than 1 copy of the Booka.place application in your account.
bgcolor="red" background color for reserved dates.
color="white" fore color for reserved dates.
headerbgcolor="#3B3B3B" background color for header/bar.
headercolor="white" fore color for header/bar.
maxwidth="400" set the maximum width pixels. No unities, only a number.
minheight="250" set the minimum height of the total calendar in pixels. No unities, only a number.
fontsize="14" set the fontsize in pixels. No unities, only a number.
lineheight="1.1" set the line height in em. No unities, only a number.
maxdate="yyyymmdd" set the max date to show (default: 31 december next year).
curdate="yyyymmdd" set date that must be shown initally.
datefrmt="dd/mm/yyyy" select the date format. Only EU (dd/mm/yyyy) and US (mm/dd/yyyy) are accepted
weekstart="0" overrule the visible startday of the week (0=monday,1=tuesday,2=wednesday,3=thursday,4=friday,5=saturday,6=sunday)
cols="4" set the max. number of horizontal months (max. 6). The result depends on screen width.
lang="auto" set the language to en/nl/it/fr/de/pt/es/pl or enter 'auto' to follow the html document tag

          <div style="background-color: aliceblue; padding: 10%; border-radius: 25px;">
          <bookaplace-all name="test_demoboo" theme="united" btnclass="info"
              result="https://booka.place/support/externalpage.html"
              maxchild="2">
          </bookaplace-all>
          </div>
          <script type="module" src="https://booka.place/v3.2/bookaplace-all.min.js"></script>
        

Accommodation is never visible in the search bar results

Please check if the price for the accommoation is set.
Accommodations without a base price will not be shown.

I see Javascript errors like 'window.resteModalE is not a function'

All known issues are caused by mixing different version at one page.
Please search in the code of the page for v1.1 and v2.0 (or newer), and update all to the newest version if you found multiple versions on the same page.

My menu/toolbar is hiding the popup

If you are using a so called 'fixed' element on your site (e.g. a menu bar) and this element makes the booking popup or the booking-bar result popup invisible then these options are available:

• Try to add influcence the z-index in CSS
• Force the booking-popup/result popup to start at a lower point by adding the param 'popuptop=60px'. You can use any value in stead of 60px, but please check the effects on a mobile device.

Prefill selection dates in the searchbar

Suppose you find a last-minute call somewhere on a forum/site and you have one or more objects available. Then you can respond with ?booka=20230130,20230131,2,0 behind the url of your site. This will open the search results with the available objects.
Example

https://your.site?booka=yyyymmdd,yyyymmdd,2,0

first yyyymmdd = arrival date Year + Month + Day
second yyyymmdd = departure date Year + Month + Day
then the required adults
then the required children

Advanced options: Results in a modal

Description:
Add the web component tags and script tag to your web site.
Your client selects the date and clicks search.
The web component opens a full-window modal to show your available accommodations (one object per type).
Each accommodation will show the price for the selected period and a booking button that will book the object, or a link for more information.
Live example:
Used html for this example:
Tip:
Copy and paste the code into the W3 schools editor.

Required elements:
1. the bookaplace-all tag, with the result="user" parameter
2. the script that loads the module (one per page is ok)

Parameters:
result="modal" returns the results inside a modal.
name="youraccountname" enter your account name.
fnr="000" enter the application number (000/001/002/..) if you have more than 1 copy of the Booka.place application in your account.
theme="" select one of the 26 Bootswatch 5 themes.
See all options on one page, fully working.
btnclass="" select primary, secondary, success, danger, warning, info, light, dark, outline-primary, outline-secondary, outline-success, outline-warning, outline-info, outline-light, outline-dark. The effect depends on the chosen Bootswatch theme.
maxadult="10" set the maximum number of adults to be selected.
maxchild="5" set the maximum number of children to be selected. Enter 0 (zero) to hide this field.
lang="auto" set the language to en/nl/it/fr/de/pt/es/pl or enter 'auto' to follow the html document tag
nobook="true" replaces the booking button in the result modal by the more info link (required!).
datefrmt="dd/mm/yyyy" sets the date format. Only EU (dd/mm/yyyy) or US (mm/dd/yyyy) are accepted.
noprice="true" disables the display of prices/price calculations in the result modal and throughout the rest of the (booking) process.
nodefaultprice="true" disables the display of the default/base price in the result modal.
weekstart="0" overrule the visible startday of the week (0=monday,1=tuesday,2=wednesday,3=thursday,4=friday,5=saturday,6=sunday)
noalt="false" set to 'true' to hide alternatives shown in result modals.
popuptop="60px" sets the top of the result modal and booking popup. Use a valid top value, check effects on mobile devices.

N.B. Even if you don't uses prices - a base price is required for each accommodation.

Advanced options: Results inside your page

Description:
Add the web component tags and script tag to your site.
Then create an overview of all your accommodations (one per type) in your site.
Add a class to each accommodation: bookaplace_typeX
(X represents the type number)
Your client selects the date and clicks search.
The web component adds an extra class (.bookaplace_na) to all unavailable accommodation types in your code.
Also added are the calculated price for the selected period and the first free object, so the client can book this object.
You can modify the style of the bookaplace_na class yourself.

Live example:


Used html for this example:

Tip:
Copy and paste the code into the W3 schools editor.

Required elements:
1. the bookaplace-all tag, with the result="user" parameter
2. the script that loads the module (one per page is ok)
3. an additional style class, named: .bookaplace_na (not available)
4. your own html code to present each of your accommodations
5. each accommodation requires a class named: bookaplace_typeX (replace X with 0 for the first accommodation, 1 for the second etc)

Parameters:
name="youraccountname" enter your account name.
fnr="000" enter the application number (000/001/002/..) if you have more than 1 copy of the Booka.place application in your account.
result="user" returns the results inside a modal.
theme="" select one of the 26 Bootswatch 5 themes.
See all options on one page, fully working.
btnclass="" select primary, secondary, success, danger, warning, info, light, dark, outline-primary, outline-secondary, outline-success, outline-warning, outline-info, outline-light, outline-dark. The effect depends on the chosen Bootswatch theme.
maxadult="10" set the maximum number of adults to be selected.
maxchild="5" set the maximum number of children to be selected. Enter 0 (zero) to hide this field.
lang="auto" set the language to en/nl/it/fr/de/pt/es/pl or enter 'auto' to follow the html document tag
datefrmt="dd/mm/yyyy" sets the date format. Only EU (dd/mm/yyyy) or US (mm/dd/yyyy) are accepted.
noprice="true" disables the display of prices/price calculations in the result modal and throughout the rest of the (booking) process.
nodefaultprice="true" disables the display of the default/base price in the result modal.
weekstart="0" overrule the visible startday of the week (0=monday,1=tuesday,2=wednesday,3=thursday,4=friday,5=saturday,6=sunday)
popuptop="60px" sets the top of the result modal and booking popup. Use a valid top value, check effects on mobile devices.

Options to enrich your HTML code:
<div class=".bookaplace_price"></div> actual price for the selected period.
<div class=".bookaplace_nights"></div> actual selected number of nights.
<div class=".bookaplace_discount"></div> actual discount (if any).
<div class=".bookaplace_guests"></div> actual additional costs by number of guests (if any).

(if any) - otherwise not displayed (display:none)

Advanced options: Results redirect to another page

Description:
Add the web component tags and script tag to your site.
Your client selects the date and clicks search.
The web component redirects to another page that also contains the web component and script tags and shows the results according to the choosen result parameter on that page.
This way you can have a search bar on your frontpage while showing all your accommodation on a separate page.

Live example:
Used html for this example:
Tip:
Copy and paste the code into the W3 schools editor.

Required elements:
1. the bookaplace-all tag, with the result="https://validurl.fr" parameter
2. the script that loads the module (one per page is ok)
3. an additional page that actually shows the results
4. the additional page also contains the web component and script tags (see modal/inside your page options above).

Parameters:
result="https://validurl.fr" redirects the results to the url.
name="youraccountname" enter your account name.
fnr="000" enter the application number (000/001/002/..) if you have more than 1 copy of the Booka.place application in your account.
theme="" select one of the 26 Bootswatch 5 themes.
See all options on one page, fully working.
btnclass="" select primary, secondary, success, danger, warning, info, light, dark, outline-primary, outline-secondary, outline-success, outline-warning, outline-info, outline-light, outline-dark. The effect depends on the chosen Bootswatch theme.
maxadult="10" set the maximum number of adults to be selected.
maxchild="5" set the maximum number of children to be selected. Enter 0 (zero) to hide this field.
lang="auto" set the language to en/nl/it/fr/de/pt/es/pl or enter 'auto' to follow the html document tag
datefrmt="dd/mm/yyyy" sets the date format. Only EU (dd/mm/yyyy) or US (mm/dd/yyyy) are accepted.
noprice="true" disables the display of prices/price calculations in the result modal and throughout the rest of the (booking) process.
nodefaultprice="true" disables the display of the default/base price in the result modal.
weekstart="0" overrule the visible startday of the week (0=monday,1=tuesday,2=wednesday,3=thursday,4=friday,5=saturday,6=sunday)
popuptop="60px" sets the top of the result modal and booking popup. Use a valid top value, check effects on mobile devices.

My menu/toolbar is hiding the popup

If you are using a so called 'fixed' element on your site (e.g. a menu bar) and this element makes the booking popup or the booking-bar result popup invisible then these options are available:

• Try to add influcence the z-index in CSS
• Force the booking-popup/result popup to start at a lower point by adding the param 'popuptop=60px'. You can use any value in stead of 60px, but please check the effects on a mobile device.

Advanced options

Description:
Add the button tags and the script tag to your web site.
Your client click the button and a booking window pops up.
Live example:
Book Used html for this example:
Parameters:
name="youraccountname" enter your account name.
obj="0" the accommodation nr, starting at zero (0).
fnr="000" enter the application number (000/001/002/..) if you have more than 1 copy of the Booka.place application in your account.
theme="" select one of the 26 Bootswatch 5 themes.
See all options on one page, fully working.
btntitle="" the text that will be visible on the button.
btnclass="" select primary, secondary, success, danger, warning, info, light, dark, outline-primary, outline-secondary, outline-success, outline-warning, outline-info, outline-light, outline-dark. The effect depends on the chosen Bootswatch theme.
lang="auto" set the language to en/nl/it/fr/de/pt/es/pl or enter 'auto' to follow the html document tag
datefrmt="dd/mm/yyyy" sets the date format. Only EU (dd/mm/yyyy) or US (mm/dd/yyyy) are accepted.
noprice="true" disables the display of prices/price calculations in the result modal and throughout the rest of the (booking) process.
nodefaultprice="true" disables the display of the default/base price in the result modal.
weekstart="0" overrule the visible startday of the week (0=monday,1=tuesday,2=wednesday,3=thursday,4=friday,5=saturday,6=sunday)
popuptop="60px" sets the top of the result modal and booking popup. Use a valid top value, check effects on mobile devices.