Advanced
All optional parameters:
Results in a modal Results in your page Results redirect to another page
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:
<bookaplace-all name="test_demoboo" theme="united" result="modal" btnclass="info" maxchild="2"></bookaplace-all>
<script type="module" src="https://booka.place/v3.2/bookaplace-all.min.js"></script>
Tip: Copy and paste the code into the W3 schools editor.
Required elements:
- the bookaplace-all tag, with the result="user" parameter.
- 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.
maxwidth="900px"
sets the maximum width of the search bar. For example 1024px or 100%.
N.B. Even if you don't uses prices - a base price is required for each accommodation.
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:
Accommodation type 0 This element represents accommodation type 0. Book
Accommodation type 1 This element represents accommodation type 1. Book
Used html for this example:
<bookaplace-all name="test_demoboo" theme="united" result="user" maxchild="0"></bookaplace-all>
<script type="module" src="https://booka.place/v3.2/bookaplace-all.min.js"></script>
<style>
.bookaplace_na {
opacity: 0.3;
}
.bookaplace_na::before {
content: " NOT AVAILABLE ";
}
</style>
<div class="bookaplace_type0" style="background-color: aliceblue; padding:10px; border-radius: 25px; width: 40%">
<b>Accommodation type 0</b>
This element represents accommodation type 0.
<bookaplace-btn name="test_demoboo" obj="0" fnr="000" lang="" btntitle="Book" theme="united">Book</bookaplace-btn> <script type="module" src="https://booka.place/v3.2/bookaplace-btn.min.js"></script>
<div class="bookaplace_type1" style="background-color: lightsalmon; padding:10px; border-radius: 25px; width: 40%">
<b>Accommodation type 1</b>
This element represents accommodation type 1.
<bookaplace-btn name="test_demoboo" obj="1" fnr="000" lang="" btntitle="Book" theme="united">Book</bookaplace-btn> <script type="module" src="https://booka.place/v3.2/bookaplace-btn.min.js"></script>
</div>
Tip: Copy and paste the code into the W3 schools editor.
Required elements:
- the bookaplace-all tag, with the result="user" parameter.
- the script that loads the module (one per page is ok).
an additional style class, named: .bookaplace_na (not available)
your own html code to present each of your accommodations
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)
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:
<bookaplace-all name="test_demoboo" theme="united" result="https://booka.place/support/externalpage.html" maxchild="2"></bookaplace-all><script type="module" src="https://booka.place/v3.2/bookaplace-all.min.js"></script>
Tip: Copy and paste the code into the W3 schools editor.
Required elements:
the bookaplace-all tag, with the result="https://validurl.fr" parameter
the script that loads the module (one per page is ok)
an additional page that actually shows the results
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.