Support for the Booka.place free availability calendar app.

Technical Help

Availability calendar

FAQ

Can I change the colors?

Yes, you can. This is done by adding a parameter, please see the advanced options.

Can I change the number of months?

Yes, you can. This is done by adding a parameter, please see the advanced options.

Can I change the width of the calendar?

Yes, you can. This is done by adding a parameter, please see the advanced options.

Is it multilingual?

Yes, you can use the option 'auto' to have the language automatically selected, or force the language to: en/nl/it/fr/de/pt/es/pl by adding a parameter. See the advanced options for an overview.

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:


      <bookaplace-avail name="test_demoboo" obj="0" fnr="000" lang=""></bookaplace-avail>
      <script type="module" src="https://booka.place/v3.1/bookaplace-avail.min.js"></script>

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.
cols="3" set the max. number of horizontal months. 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

How to install the app?

Apple iPhone/iPad

You can install the app on the home screen.
Please follow these steps:

Start Safari
go to https://Booka.place/app
No Booka.place account yet? Click 'Create a free account' and enter your name, email and domain name. An account is needed to prevent that anyone can edit your availability data.
Already have a Booka.place account (free, lite or pro)? Enter your name and your password.
Open the Share menu, available at the bottom or top of the browser.
Click Add to Home Screen.

Apple macOS

Start Safari
go to https://Booka.place/app
No Booka.place account yet? Click 'Create a free account' and enter your name, email and domain name. An account is needed to prevent that anyone can edit your availability data.
Already have a Booka.place account (free, lite or pro)? Enter your name and your password.
Open the Share menu, available at the bottom or top of the browser.
Click Add to Home Screen.

Android

On Android, the installation differs by device and browser.

Chrome/Brave/Edge

go to https://Booka.place/app
No Booka.place account yet? Click 'Create a free account' and enter your name, email and domain name. An account is needed to prevent that anyone can edit your availability data.
Already have a Booka.place account (free, lite or pro)? Enter your name and your password.
The app shows an 'Add to home screen' button
Click the button and follow the instructions.

Firefox

go to https://Booka.place/app
No Booka.place account yet? Click 'Create a free account' and enter your name, email and domain name. An account is needed to prevent that anyone can edit your availability data.
Already have a Booka.place account (free, lite or pro)? Enter your name and your password.
Click Install or Add to Home Screen

Windows 10/11

On Windows, the installation procedure depends on the browser that is used.

Chrome/Brave/Edge

go to https://Booka.place/app
No Booka.place account yet? Click 'Create a free account' and enter your name, email and domain name. An account is needed to prevent that anyone can edit your availability data.
Already have a Booka.place account (free, lite or pro)? Enter your name and your password.
The app shows an 'Add to home screen' button
Click the button and follow the instructions.

Firefox

go to https://Booka.place/app
No Booka.place account yet? Click 'Create a free account' and enter your name, email and domain name. An account is needed to prevent that anyone can edit your availability data.
Already have a Booka.place account (free, lite or pro)? Enter your name and your password.
go to https://Booka.place/app
Click Install or Add to Home Screen

Linux

On Linux, the installation procedure depends on the browser that is used.

Chrome/Brave/Edge

go to https://Booka.place/app
No Booka.place account yet? Click 'Create a free account' and enter your name, email and domain name. An account is needed to prevent that anyone can edit your availability data.
Already have a Booka.place account (free, lite or pro)? Enter your name and your password.
The app shows an 'Add to home screen' button
Click the button and follow the instructions.

Firefox

go to https://Booka.place/app
No Booka.place account yet? Click 'Create a free account' and enter your name, email and domain name. An account is needed to prevent that anyone can edit your availability data.
Already have a Booka.place account (free, lite or pro)? Enter your name and your password.
go to https://Booka.place/app
Click Install or Add to Home Screen

Chromebook

Chrome

go to https://Booka.place/app
No Booka.place account yet? Click 'Create a free account' and enter your name, email and domain name. An account is needed to prevent that anyone can edit your availability data.
Already have a Booka.place account (free, lite or pro)? Enter your name and your password.
The app shows an 'Add to home screen' button
Click the button and follow the instructions.

Search bar

FAQ

Can I show the results in a modal?

Yes, this is the default setting. You can change and/or finetune this by modifing a parameter, please see the advanced options.

Can I show the results on my own page?

Yes, you can add elements on you own page. These elements will be replaced by the search results. You can change and/or finetune this by modifing a parameter, please see the advanced options.

Can I show the results on another page on my site

Yes, the search bar can show the results on another page on your site. This is done by adding a parameter, please see the advanced options.

Can I use the app to manage my bookings?

Yes, an app is available for easily managing your bookings.

Can I change the search bar holder?

The web component uses a shadow-dom, that can not be influenced from outside.
However, you can influence the parent element of the web component.
For example:

Used html for this example:


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

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

Can I change the colors, padding, margins, type of ...

The web component uses a shadow-dom, that can not be easily influenced from outside.
However, you can select a theme and btnclass by settings these 2 parameters:

Parameters:
theme="" select one of the 26 Bootswatch 5 themes [not available for the availability calendar].
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 [not available for the availability calendar].

And you can use these more advanced 'tricks' to influence css inside the shadow-dom:

CSS-TRICKS: Styling in the Shadow DOM With CSS Shadow Parts

The Black information window responds to CSS in your main document. For example:
#msg2usert small { font-size: 70% } #msg2usert table { line-height: 1 }
will make this window smaller.

Can I use the booking bar as an availability calendar?

Yes, use the result-modal and these settings:

nobook="true" replaces the booking button in the result modal by the more info link (required!).
noprice="true" disables the display of prices/price calculations in the result modal.

Don't forget to configure the minimal settings for each object, like descriptions, prices, discounts, guests, etc.

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

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.

Is it multilingual?

Yes, you can use the option 'auto' to have the language automatically selected, or force the language to: en/nl/it/fr/de/pt/es/pl by adding a parameter. See the advanced options for an overview.

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: 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" maxchild="2"></bookaplace-all>
      <script type="module" src="https://booka.place/v3.1/bookaplace-all.min.js"></script>

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.
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!).
noprice="true" disables the display of prices/price calculations in the result modal.
datefrmt="dd/mm/yyyy" sets the date format. Only EU (dd/mm/yyyy) or US (mm/dd/yyyy) are accepted.
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:

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.1/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><br>
            This element represents accommodation type 0.<br>
            <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.1/bookaplace-btn.min.js"></script>
        </div>
        <div class="bookaplace_type1"
            style="background-color: lightsalmon; padding:10px; border-radius: 25px; width: 40%">
            <b>Accommodation type 1</b><br>
            This element represents accommodation type 1.<br>
            <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.1/bookaplace-btn.min.js"></script>
        </div>

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 availble)
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.
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.
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:


        <bookaplace-all name="test_demoboo" theme="united"
            result="https://booka.place/support/externalpage.html"
            maxchild="2"&rt;
        </bookaplace-all&rt;
        <script type="module" src="https://booka.place/v3.1/bookaplace-all.min.js"&rt;</script&rt;

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.
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.
popuptop="60px" sets the top of the result modal and booking popup. Use a valid top value, check effects on mobile devices.

Booking buttons

FAQ

What is the difference between a PMS, a booking engine and a channel manager?

A PMS is an integrated hard and software management system that automates the full multi-user process of making reservations, checking guests in and out, delegating housekeeping tasks, handling of Point of Sales terminals, invoicing, price management, etc.

A channel manager is a software system that helps you managing your property across multiple different distributing channels.

A booking engine is a software system that helps you selling your accommodation on your (own) website. It offers your visitors 24/7 information about availability, the option to make a reservation. It generates, collects and distributes essential data about reservations, like prices, user name, email address and telephone number. It prevents double booking by automatically blocking reserved dates. It exchanges bookings with third parties.

Booka.place is a booking engine.

What is the difference a booking engine and a form on my site?

A booking engine handles bookings, it shows available accommodations and/or dates, it calculates the right price for the selected date range and choosen options, it registrates the required data, updates your calendar and handles the confirmations etc. It can also handle the direct (credit card) payment of the booking.
Nowadays most visitors prefer direct booking above starting a mail conversation about all the required details with the risk of loosing the desired accommodation in the meantime.
The owner of the website can decide if a booking is legally binding or has to be confirmed first.

Is it multilingual?

Yes, you can use the option 'auto' to have the language automatically selected, or force the language to: en/nl/it/fr/de/pt/es/pl by adding a parameter. See the advanced options for an overview.

Can I change the titles?

Yes, you can use the title of the buttons by adding a parameter. See the advanced options for an overview.

Can I change the confirmation messages?

Yes, you can change the content of all messages yourself, even in multiple languages.

Can I use the app to manage my bookings?

Yes, an app is available for easily managing your bookings.

Can I change the colors, padding, margins, type of ...

With which editors can it be used?

It generates a totally independent web component that can be copied and pasted into any editor.
Tailor made instructies how to copy and paste are available for:
WordPress Classic editor, WordPress Gutenberg editor, WordPress Elementor, Wix, Jimdo, SquareSpace, Weebly.

Is it responsive?

Yes, the result automatically adjusts to any screen size.
The owner dashboard is best viewed with a desktop. Owners can also use the app to do the essential booking management on their phones/pads.

Is it really integrated in my site?

Yes, it consists of web components that are fully served from your own domain. There are no user-experience and SEO breaking iframes involved.
This means that your clients are not confrontated with unexpected redirections to third-party sites. Your clients do not have to re-select the already choosen accommodation again in a different environment, but keep the at first-sight selected accommodation on screen while booking.
Even cedit-card payments are handled within your own website.

What payment methods are supported?

Inside Europe IBAN/SEPA Instant can be used (bank transfers within seconds between 23 EU countries), Also PayPal, Mastercard, VISA credit cards, iDeal, Sofort and other local payment methods are available.
Booka.place does not interfere with your money, payments by guests are made directly into your own Bank/PayPal account.

Does it synchronize with ...

Yes, It fully supports iCal, both in import and export.
Bookings made on your site are exported in realtime and can be imported by systems like Booking.com, AirBnB, VRNO, HomeAway, Tripadvisor, Flipkey etc.
Bookings made on other platforms are imported in the Booka.place component on your site, the dates booked on other platforms will be shown as reserved/booked.
So double bookings are prevented automatically.

What pricing options are available?

There are many options to automatically display the price of your accommodation.
The base price per accommodation can be influenced by the type of day, per season, length of stay, number of guests. You can compile, per accommodation, an unlimited number of periods with different prices (percentage or fixed), minimum number of obligatory days to stay... Besides this there are discounts, extra costs starting from x adults/children etc. etc.
You can add, per accommodation, unlimited checkout options with additional costs per night or per person per night or per person per booking or per booking.

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:


      <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.1/bookaplace-btn.min.js"></script>

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.
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.
popuptop="60px" sets the top of the result modal and booking popup. Use a valid top value, check effects on mobile devices.

Maxiumum Simplicity

Technical Help

Get Started

About us

Products