Quickstart

These are the minimal required steps to get Booka.place running.

STEP 1: Personalize the accommodation

1. Login at your dashboard and click at the Booka.place button.
2. Go to the icon bar on the left of your screen and click at 'Accommodations'.
3. Click at 'Accommodation 1' to open its settings.
4. Change the name.
5. Enter the default price per day.*
6. Define the max. guests your accommodation can host.*
7. Go to the icon bar on the left and click 'Settings', scroll down and add your e-mail address.
8. Click the 'Update' button to make your changes public.

STEP 2: Put the booking button/availability calendar/search bar on your website

1. Go to the accommodation.
2. Scroll down to the section 'integration in your site' and make your choice.
3. Select your editor.
4. Follow the instructions tailor-made for your editor.

• Not available in the lite version.

What's new

User defined css

All components now accept user defined css. Experts now can finetune all elements of Booka.place in detail.

How does this work?

Add a tag inside the <booka.... </booka...> tags and enter inside the style tag you own css. For example:

<style slot="css">
    .btn.btn-danger { 
		font-style: italic;
		background-image: linear-gradient(yellow, purple 60%, green);
    }
</style>

This will change the default buttons used in the software.

Live example:

Webhooks

If you want to trigger an external function/url after a booking/reservation request was made, you can enter the required url at in the dashboard in the section settings at Webhooks

--> click Update to activate changes.

Surcharges

Also new surcharge feature based on the duration of stay. While discounts have long been available for extended stays, this new functionality allows you to apply additional charges for shorter stays or specific durations. It provides more flexibility in pricing strategy, helping you better reflect operational costs and optimize revenue. This can be found in the dashboard in the section Accommodations and can be different for each accommodation.

--> click Update to activate changes.

FAQ bookings

FAQ Bookings

Differences calendar Live vs Dashboard

The Live calendar shows the reserved dates in a different way than the calendar in the dashboard. This is the result of the different purposes;
The Live calendar shows the departure day as free (bookable) to invite people to book this day.
The Dashboard calendar shows the same departure day as booked, as the guest still occupies part of this day.
If you have a guest leaving at the 10th and a new guest is arriving at the 10th you'll see two bookings/guests at this day in the Dashboard calendar.
This is perfectly normal, you can see it as a change-over day.

Receiving bookings per email

All message are send by 'noreply@mail.ladauze.eu' or 'noreply@mailserver.ladauze.eu'.
These are professional configured messaging systems, with valid certifcates, DKIM en SPF records. Nevertheless, add this email address to your Whitelist to prevent it will be classified as spam.

Double bookings

If a guest selects payment method X and this method fails, the same guest can go back and select another payment method (to save the booking). If 'Real-time Reservations' is active, this behaviour will result in a double booking for the same guest. The differences are: a new bookingID and a changed payment method field.
Please delete the failed booking manually.

FYI:
if 'Real-time Reservations' is activated, new bookings are exported in real-time to your website (the calendars, booking-bars and buttons) and to the exported ical files for synchronising with others.

FYI: if two guests book the same accommodation on the same day(s), only one can succeed.
The other guest receives a message that the accommodation has been booked already.

Name and description

Name

Enter a name for the accommodation. Keep it short, do not add additional promotional texts.

Select a color for this accommodation, it will a.o. be used in the Bookings overview year calendar.

Description

The short description will be used in the search bar results modal. Click in the white field to the right of 'Short description' to popup a multi-language text fields popup. Here you can enter the description of your accommodation in 7 languages. The English text will be used if no appropriate language is available, so always enter an English description. Scroll down in the popup and click 'Save' to return.

Add a direct link to the accommodation. This is used if your guests need more information about this specific accommodation during the booking process.

Photos

Select the highest resolution photos you have available.

The photos will be automatically optimized for publishing on the internet. Don´t worry about file size and loading times.

Pricing

Default price per night

This field is required.
Even if you only rent out by the week, it is necessary to calculate the default price per night.
This can easily done by dividing your week price by 7 ;-)

Enter the most common price, you can deviate from this in the periods you specify further down in the settings.

Price per night

Example: to charge higher rates in the weekend, enter a higher price in the fields fri, sat and sun.

Price differences per season

You can set seasonal prices here.

Steps:

1. Enter a description (not publicly shown)
2. Set the From and To dates by clicking in the field and selecting a date or by manually entering using the date format YYYY-MM-DD (for example 2025-12-31)
3. Enter the price per night deviation. You can enter:
   1. 100 to replace the default price by 100.
   2. -10 or + 10 to decrease/increase the default price with 10 Euro/USD.
   3. -10% or +10% to decrease/increase the default price with 10%.

Click 'Add new' to add an extra row for another price difference.

Some examples:

Example: give a discount of 7% if a guest stays a week

Steps:

1. Click 'Accommodations' and select an accommodation.
2. Scroll to 'Discount based on duration of stay'.
3. Click at the field next to 'Discount 1' and enter: -7%.
4. Enter 7 in the 'nights' field.
5. Click 'Update'.
6. Check that the option works as you intended.

Example: surcharge if a guest only books 1 night? New

Steps:

1. Click 'Accommodations' and select an accommodation.
2. Scroll to 'Default price per night' and enter the desired price for 1 night.
3. Then scroll to 'Surcharge based on duration of stay'.
4. Click at the field next to 'Surcharge 1' and enter +25 for a surcharge of 25 or +10% for 10% extra.
5. Click 'Update'
6. Check that the option works as you intended.

Example: add a surcharge of 100% during Christmas

Steps:

1. Click 'Accommodations' and select an accommodation.
2. Scroll to 'Price differences per season'.
3. Click on an empty line below 'Descr' and enter the description for this period.
4. Click in the 'From' field and enter the start date of this period.
5. Click in the 'To' field and enter the end date of this period.
6. Click in the 'Price night' field and enter: +100%.
7. Click 'Update'.
8. Check that the option works as you intended.

Calendar requirements

Here you can set up requirements per season, e.g. a required minimum number of nights, a fixed arrival day etc.

Some examples:

Example: only accept arrivals on Saturdays

Steps:

1. Click 'Accommodations' and select an accommodation.
2. Scroll to 'Requirements per season'.
3. Click on an empty line below 'Descr' and enter the description for this period.
4. Click in the 'From' field and enter the start date of this period.

If you want to use this option continuously, enter '2024-03-14' (today)

5. Click in the 'To' field and enter the end date of this period.

If you want to use this option continuously, enter '2026-12-31' (the future)

6. Click in the 'Arrival' field and select 'sat'.
7. Click 'Update'.
8. Check that the option works as you intended.

Example: only accept minimal 3 days (in a period or continuously)

Steps:

1. Click 'Accommodations' and select an accommodation.
2. Scroll to 'Requirements per season'.
3. Click on an empty line below 'Descr' and enter the description for this period.
4. Click in the 'From' field and enter the start date of this period.

If you want to use this option continuously, enter '2024-03-14' (today)

5. Click in the 'To' field and enter the end date of this period.

If you want to use this option continuously, enter '2026-12-31' (the future)

6. Click in the 'Min nights' field and enter 3.
7. Click 'Update'.
8. Check that the option works as you intended.

Guests

Enter the maximum adults that you can host in this accommodation.

If you want to connect the price to the number of guests, enter the price settings for extra guests. Add the price as a fixed amount per person per night or per person per booking.

Animals

If you accept animals and/or want to charge for them, you can use these options.

Example: add a surcharge of € 10 for each additional guest

Steps:

1. Click 'Accommodations' and select an accommodation.
2. Scroll to 'Guests'.
3. Click at the field next to 'Extra costs from' and select the number of guests above which you want to impose a surcharge.
4. Add +10 in the next field.
5. Select per night in the next field.
6. Click 'Update'.
7. Check that the option works as you intended.

Checkout options

Here you can add optional options that are shown in the checkout, at the moment of making a booking/reservation.

You can use these options to charge cleaning costs, tourist tax, bike hire etc.

The price can be fixed (the option will be checked / calculated by default, e.g. for cleaning costs) or optional (the guest can select the option if he wants to, e.g. for bike hire).

Example: charge tourist tax per night

Steps:

1. Click 'Accommodations' and select an accommodation.
2. Scroll to 'Checkout options'.
3. Below 'Checkout option' add the description of the option: Tourist tax.
4. Below 'Optional' select Fixed.
5. Below 'Price' add the price.
6. Below 'Type' select: 'Per person per night'.
7. Click 'Update'.
8. Check that the option works as you intended.

Export Import (Sync)

[ Export and import of reservations. ]

Automatic synchronization interval

Booka.place collects your new reservations at least every 5 minutes (Pro) or 15 (Lite) minutes, day and night. And when someone books at your site it checks again, now in real-time, if the accommodation is still available.

Please read the requirements below.

Number of synchronisation sources per accommodation

You can have up to 5 different OTA's per accommodation. Our systems will collect all these sources at least every 5 minutes (Pro) or 15 (Lite) minutes minutes, day and night.

Once the url is accepted, it will be requested by the Booka.place servers

Requirements for external iCal sources

The requirements are:

1. a valid url,
2. a valid iCal format,
3. future reservations only (not older than 3 months),
4. accessible 24/7 and
5. an access time of less than 500 ms.

N.B. If a resource does not meet the requirements, it cannot be shown, so no reservations from this source will be visible. Use the iCal Import update button in the dashboard to test your resources, or use the iCal Validator to see the content of any iCal file.

Once the url is accepted, it will be requested at least every 5 minutes (Pro) or 15 (Lite) minutes by the Booka.place servers.

FAQ

FAQ Synchronisation

Dashboard: new iCal source is not accepted

If you specify a new source in the dashboard it has to be validated before you can continue. This warning is not an error in our software, but a warning that the file to be imported does not match our requirements.

Source invalid ical

If you have doubts about this check, you can use the following tools to see for yourself what is wrong with the resource.

TIP: Use the iCal Validator to see the actual content of the iCal file.

Source too old

A source with old reservations will not be accepted (older than 3 months) because:

• it serves no purpose (nobody reserves a date in the past).
• the generally accepted practice is to use only future reservations for synchronisation. If you don't have the possibility to delete old reservations yourself, it is best to ask the resource provider to do this for you.
• It puts unnecessary burden on all systems involved.

Source too slow

If the resource is rejected because it does not respond quickly enough (TTFB) then you can have this tested at domsignal.com/ttfb-test.

Note: this only tests the server's response time, required is a full download within 500 ms. All well-known OTAs such as airBnB and Booking meet this requirement without any problems.

These servers operate from multiple geographical locations and use data centres from AWS and Cloudflare network infrastructure.

Once the url is accepted, it will be requested every at least every 5 minutes (Pro) or 15 (Lite) minutes by the Booka.place servers.

How to sync Booka.place with ...

AIRBNB:

How do I sync my Airbnb calendar with another calendar?

BOOKING.COM:

Syncing your Booking.com calendar to third-party calendars

HOMEAWAY / VRBO.COM:

Note: VRBO cs can't handle 5 minute sync (429 errors), so they are synced every 10 minutes in stead of every 5 minutes.

Import a calendar to sync with your reservation calendar

TRIPADVISOR / FLIPKEY:

How can I connect with other calendars? (for owners)

Availability calendar

FAQ Advanced use

To show an availability calendar on your website or your Facebook timeline or post, please follow these steps:

Steps:

1. Go to the accommodation you want to add.
2. Scroll down to 'Integration on your website'
3. Click the 'Create availability overview' button
4. Select 'Your editor'
5. Copy the shown code to the clipboard or check 'Use widget' if your editor has a Booka.place plugin already built-in.
6. Read the tailor made instructions for your editor and follow the steps.

Result

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 code for this example:

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

FAQ

FAQ Availability calendars

Differences calendar Live vs Dashboard

The Live calendar shows the reserved dates in a different way than the calendar in the dashboard. This is the result of the different purposes;
The Live calendar shows the departure day as free (bookable) to invite people to book this day.
The Dashboard calendar shows the same departure day as booked, as the guest still occupies part of this day.
If you have a guest leaving at the 10th and a new guest is arriving at the 10th you'll see two bookings/guests at this day in the Dashboard calendar.
This is perfectly normal, you can see it as a change-over day.

Block all rooms if 'the whole house' is reserved and vice versa

If you have separate bookable rooms but also offer the booking of "the whole house", you can use the steps below. The result will be:

• someone books a room -> the whole house can not be booked in this period.
• someone books the whole house -> all rooms are blocked in this period. This setup requires the creation of a accommodation 'the whole house' and creating synchronization links between all rooms.

This only works up to 5 rooms

1. Go to the first room you want to link
2. Under 'export/import', turn the option 'Export iCal ...' ON and copy the default URL (https://data.booka.place/ ...) to a text editor, so you can use it later on.
3. Do the same for the other rooms.
4. Create an umbrella accommodation ('the whole house'), enter at least a standard price per night and under 'export/import', turn the option 'Export iCal ...' ON.
5. Click UPDATE so that the iCal files are created.
6. Copy and paste the URL's you saved in step 2 into the 'import iCal files'.
7. Click the red button to check the files.
8. Check the export checkbox and copy the default export iCal URL
9. For each room: check the Import iCal checkbox and paste the copied 'whole house' export URL into a field. Click the red button.

As a result, for all rooms and the 'whole house', the export and import check boxes will be ON and all rooms will have 1 import url (from the whole house) and the whole house will have multiple import urls (1 for each room).

N.B. The status of the 'whole house' in the above setup is for internal use on your website only. To export the status to third parties you'll have to apply the same scheme at external calenders.

Show availability in a Facebook post

You paste a link to an availability calendar in your post or comment. The interested party clicks this link and immediately sees the availability of your accommodation(s). If you have a Booka.place Pro account, the interested party can also easily send a reservation request or book directly.

Below you can see some examples: (they open in a new browser window)

Steps:

1. Open an account: https://booka.place/nl/booka-place-pricing.html
2. App: click on 'Settings', select 'Show code for your website' and choose 'Facebook post'
3. Pro: select the relevant accommodation in the dashboard under 'your accommodations',
4. click 'Create a search bar' or 'Create an availability overview' under 'Integration in your website
5. under 'Your editor', select 'Facebook post/comment'.
6. Paste the code into your post.

Show availability on a Facebook business page

You can place an iframe tab on your Facebook business page and include a Booka.place code in this tab. The result will be that your availability calendar(s) will show up on your Facebook business page. Maintaining the calendars can be done via the free Booka.place app, or if you have a Pro version, from the Booka.place dashboard.

Steps:

1. Open an account: https://booka.place/nl/booka-place-pricing.html
2. In the app or in the dashboard, click on 'Show code for your website' and choose 'Facebook business page'
3. Install an 'IFRAME TAB'
   • for example 'Static HTML: iframe tabs' (free): go to this fb app page ( There are also alternative solutions )
   • Click 'Add to my Page' in the right-hand column.
4. Then paste the Booka.place iframe code into the window titled 'Your content here'.

Advanced

Change the colors

See these parameters:

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.

Example:

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

All optional 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 font size 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"

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

Experts

User defined css

All components accept user defined css.
Experts can finetune all elements of Booka.place in detail.

How does this work?

Add a tag inside the bookaplace tags and enter inside the style tag you own css.
For example:

<bookaplace-avail name="test_demoboo" obj="0" fnr="004" lang="" bgcolor="red">

    <style slot="css">
      #Datepickk .d-weekdays, #Datepickk .d-week {
    	background-color: orange;
    }
    </style>

</bookaplace-avail>
<script type="module" src="https://booka.place/v3.2/bookaplace-avail.min.js"></script>

This will change the background of the week bar.

Search bar

FAQ Advanced use

Steps:

1. Go to the accommodation you want to add.
2. Scroll down to 'Integration on your website'.
3. Click the 'Create a search bar' button.
4. Select 'Display results in a modal (easy)'.
5. Select 'Your editor'.
6. Copy the shown code to the clipboard.
7. Read the tailor made instructions for your editor and follow the steps.

Result

Add the following tags and the script tag to your web site. An up-to-date search bar will be shown.

Live example:

Book

Used html code for this example:

<bookaplace-all name="test_demoboo" fnr="004" lang="" btntitle="Book" result="modal" theme="united">Book</bookaplace-all>
<script type="module" src="https://booka.place/v3.2/bookaplace-all.min.js"></script>

FAQ

FAQ Search bar

Can I show the results in a popup/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 besides our expert mode (see below) can not be influenced from outside. The easy way: You can influence (the parent element of) the element that contains the Bookaplace code. For example:

Add padding around the search bar:

Used html for this example:

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

Center the search bar:

Add display: flex; justify-content: center; to the parent element of the element that contains the Bookaplace code:

Please note: the result depends on the other CSS settings of your site!

Used html for this example:

<div style="background-color: cornsilk; display: flex; justify-content: center;">
<bookaplace-all name="test_demoboo" theme="united">
</bookaplace-all>
</div>
<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.

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

The web component uses a shadow-dom, that, besides the expert mode (see below) can not be easily influenced from outside. The easy way: You can select a theme and btnclass by setting these 2 parameters:

Parameters:

theme="" select one of the 26 Bootswatch 5 themes [not available for the availability calendar].

See all the theme 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 (not available for the availability calendar).

The yellow 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 search 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 and throughout the rest of the (booking) process.

nodefaultprice="true" disables the display of the default/base price 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 default base price per night for the accommoation is set. Accommodations without a default 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 navigation 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 influence 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 search bar

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=20250803,20250805,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 and then the required children.

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:

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"` ~~

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:

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:

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"` ~~

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:

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"` ~~

popuptop="60px" sets the top of the result modal and booking popup. Use a valid top value, check effects on mobile devices.

Experts

User defined css

All components accept user defined css.
Experts can finetune all elements of Booka.place in detail.

How does this work?

Add a tag inside the bookaplace tags and enter inside the style tag you own css.
For example:

<bookaplace-all name="test_demoboo" theme="united" maxchild="0">
  
  <style slot="css">
      .btn.btn-danger,.btn.btn-primary.accept-btn,.btn.btn-secondary.realclear-btn { 
      color: black;
      background-image: linear-gradient(gold, white 60%, gold);
      }
  </style>

</bookaplace-all> 
<script type="module" src="https://booka.place/v3.2/bookaplace-all.min.js"></script>

This will change the background of buttons throughout the application.

Live example:

Booking buttons

FAQ Advanced use

Steps:

1. Go to the accommodation you want to add.
2. Scroll down to 'Integration on your website'
3. Click the 'Create booking button' button
4. Select 'Your editor'
5. Copy the shown code to the clipboard
6. Read the tailor made instructions for your editor and follow the steps.

Result

Add the following tags and the script tag to your web site. An simple booking button will be shown.

Live example:

Book

Used html code for this example:

<bookaplace-btn name="test_demoboo" obj="0" fnr="004" lang="" btntitle="Book" theme="cerulean">Book</bookaplace-btn>
<script type="module" src="https://booka.place/v3.2/bookaplace-btn.min.js"></script>

FAQ

FAQ Booking buttons

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.

Booka.place is a booking engine with all the essentials of a channel manager built in.

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 ...

The web component uses a shadow-dom, that besides our expert mode (see below) can not be influenced from outside. The easy way: You can select a theme and btnclass by settings these 2 parameters:

Parameters:

theme="" select one of the 26 Bootswatch 5

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 (not available for the availability calendar).

Expert mode See below how to change the css in detail via the slot method.

The Yellow 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.

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: 1Blu Sitebuilder, Facebook (post/comment), Hosted.com Sitebuilder, Hostfly.by Sitebuilder, Hosting.co.uk Sitebuilder, Hubspot, iNetSolutions Sitebuilder, Jimdo, LWS Sitebuilder, Namecheap Sitebuilder, Neostrada Sitebuilder, Svenska domainer Sitebuilder, Vimexx Sitebuilder, Webbkungen Sitebuilder, WordPress with Booka.place plugin, WordPress Classic editor, WordPress Gutenberg Blocks editor, WordPress Elementor editor, Wix with domainname, Weebly and Squarespace

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 credit-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.

Since sept. 2022 Mollie is integrated with the following payment methods: Apple Pay, VISA,Mastercard, American Express ao, iDeal, Vouchers, Sepa Direct debit, Bancontact, Cartes Bancaires, EPS, PostePay, Giropay, KBC Payments, Belfius, gift cards, etc.

Booka.place does not interfere with your money, payments by guests are made directly into your own Bank/PayPal/Mollie account.

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:

1. Try to add influcence the z-index in CSS
2. 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

All optional 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.

weekstart="0"

popuptop="60px" sets the top of the result modal and booking popup. Use a valid top value, check effects on mobile devices.

Experts

User defined css

All components accept user defined css.
Experts can finetune all elements of Booka.place in detail.

How does this work?

Add a tag inside the bookaplace tags and enter inside the style tag you own css.
For example:

<bookaplace-btn name="test_demoboo" obj="0" fnr="004" lang="" btntitle="Book">
  Book
  <style slot="css">
      .btn.btn-danger, .accept-btn, .realclear-btn { 
      font-style: italic;
      background-image: linear-gradient(yellow, purple 60%, green);
      }
  </style>
</bookaplace-btn> 
<script type="module" src="https://booka.place/v3.2/bookaplace-btn.min.js"></script>

This will change the background of buttons throughout the application.

Live example:

Accommodations list

What is it?

An accommodation list component shows a list of your accommodations in a very compact way. It shows the photo's of each accommodation in a slider and the descriptions and prices with a 'Book now' button.

When to use it?

The accommodation list component can be used if your editor is not equipped to easily show individual buttons and calendars. Especially for editors that work with i-frames using this component can save a lot of time.

FAQ

FAQ Accommodations list component

Wix

Follow these steps to add a list of your accommodations to your Wix site.

1. Open the Wix editor.
2. Add a 'blank' section by clicking the symbol in the icon bar on the left of your screen and then selecting 'blank'.
3. Click the symbol to 'add elements'.
4. Select 'Embed Code' and click then
5. 'Embed a site'.
6. At 'what is the website address' field enter the URL, for example: https://booka.place/v3.2/acclist.html?name=test_demoboo&fnr=004&theme=cosmo
7. Close the HTML Settings window.
8. Click the symbol to stretch the new element to full width.
9. Drag the element to the top of the section
10. Then make the element as large as needed (it depends on the number of accommodations) by pulling down the bottom bar with the symbol.
11. If the section is not high enough, you can pull the Wix stretch element to enlarge the section as well.
12. Repeat these steps for the Wix mobile website.

Localisation

Currency

Select between Euro and USD

Date format

Select between European and American

Deposits

If you want your guest to pay a part of the amount due in advance, you can set that here. You can use a percentage or a fixed amount.

Payment methods

IBAN

In the checkout your client can choose IBAN to pay the (pre)payment of their booking.

Requirements:

• a bank account with an IBAN number
• the SWIFT code of your bank

Steps:

1. Check the check-box 'Accept IBAN'.
2. Enter the IBAN and BIC/SWIFT code in the dedicated fields.
3. If the option 'Use IBAN real-time reservations'* is activated, a booking will be directly added to the calendar on your website to prevent double bookings.
4. Check the belonging messages for the customer in the section 'Messaging' below.

• If you don't use Real-time Reservations' you will have to manually register the selected dates after receiving a payment. There may be a few days between the time of booking and the final payment (bank transfer). During these days the same period can be booked by third parties. This can lead to double bookings.

PayPal

For an overview of all supported payment methods: https://developer.paypal.com/docs/business/payment-methods/

Requirements:

• a free PayPal Developer account
• the e-mail address that is known with PayPal
• the PayPal CLIENT-ID see FAQ below

How does this work?

In the checkout your client can choose PayPal/Credit card to pay the (pre)payment of their booking. PayPal offers multiple local payment options like SOFORT, iDEAL, etc.

Steps:

1. Check the check-box 'Accept PayPal'.
2. Enter the e-mail address that you use to login at PayPal in the first field (your PayPal account ID)
3. Enter a valid PayPal client ID in the second field. (for example:
   AVfqa3bhS_HxxxxxxxxtS4 znphnkVDkoCeSUfFKQiHS mxxxxxxw1SNPWnriJ2k6URl5m RxxxxxglKPqf)
4. If the option 'Use PayPal real-time reservations*' is activated, a booking will be directly added to the calendar on your website to prevent double bookings.
5. Check the belonging messages for the customer in the section 'Messaging' below.

• If you don't use Real-time Reservations' you will have to manually register the selected dates after receiving a payment. There may be a few days between the time of booking and the final payment (bank transfer). During these days the same period can be booked by third parties. This can lead to double bookings.

The actual payment will be instantly received into your PayPal account. N.B. Please check the actual payment status of each booking in your PayPal dashboard.

PayPal IPN

under construction

If you use PayPal IPN - your booking data will be upgraded with additional information about the payment/client AND your client will receive a confirmation message noted as Z) in the MESSAGING section.

You can simply activate PayPal IPN in your PayPal dashboard:

- go to PayPal Account settings - go to PayPal Website payments - click 'update' at 'Instant payment notifications' - select 'Cart Checkout' - enter the following Notfication url: https://sls.booka.place/book/paypalipn/ - select 'enabled' and click 'save'

Mollie

An overview of available payment methods can be found here.

Requirements:

• a free Mollie account
• an API key (see your Mollie dashboard)

Steps:

1. Check the check-box 'Accept Mollie'.
2. Enter the API key code of your Mollie account in the dedicated field.
3. Select all the payment methods you want to offer/show during the booking process. Only previously activated payment methods will be shown.
4. If the option 'Use Mollie real-time reservations'* is activated, a booking will be directly added to the calendar on your website to prevent double bookings.
5. Check the belonging messages for the customer in the section 'Messaging' below.

• If you don't use Real-time Reservations' you will have to manually register the selected dates after receiving a payment. There may be a few days between the time of booking and the final payment (bank transfer). During these days the same period can be booked by third parties. This can lead to double bookings.

The actual payment will be instantly received into your Mollie account.
N.B. Please check the actual payment status of each booking in your Mollie dashboard.

PayPal FAQ

Get your PayPal Client ID

If you have a PayPal business account

In the PayPal main menu select the item Business Tools

On the Business Tools page, scroll down until you see:

Click at API credentials

On the API credentials page, click Get Started

On the Get your API credentials page, copy the CLIENT ID code

Go back to the Booka.place dashboard and paste the CLIENT ID code in the second field in the PayPal section.

The secret field is not used in this procedure.

If you have a PayPal personal account

Please see your PayPal Developer dashboard - more instructions

Instructions since sept 2023:

1. Please login into your PayPal account at https://www.paypal.com
2. Go to 'Developer'
3. Go to 'Apps & Credentials'
4. Click the button 'Create App'
5. Enter a name, for example 'bookaplace' and click the button 'Create app'
6. Find your Client ID and copy it to a save place (your password database)

Example: AXohA_ruhP-jTs7mN-f-zSmr3NvEVJCcJB-Tno8V50JYg-

7. Enter this PayPal client-id in Booka.place settings

If you have questions about these steps, please contact PayPal

Instructions for older accounts:

1. Please login into your PayPal account at https://www.paypal.com
2. Go to 'Account settings'
3. Go to 'Website payments'
4. Find the section 'PayPal Buttons' and click at 'update'
5. Click at 'Smart Buttons'
6. Do not change anything and click at 'Copy Code'
7. Paste the code from your clipboard to a text editor so you can read it.
8. In the code search for the client-id=
9. Copy the text that starts after client-id= and stops with the first & sign
10. This is your client ID
    

Example: AXohA_ruhP-jTs7mN-f-zSmr3NvEVJCcJB-Tno8V50JYg-

11. Enter this PayPal client-id in Booka.place settings

Messaging

Available fields

You can change the content of the messages.

Enter at least an English text. This variant of the text will be displayed if no other text is available.

You can use the following fields in your messages:

Tip: First, configure your payment options. The choices you make there will determine which texts are relevant here.

Tip: If you messed up this section you can consider to replace all texts by its default by clicking 'Reset to default'

Legal

As you visitors stay on your website, you can show any legal information on your website.

Quick start app

After the installation you can start with these steps:

1. in the app, click settings
2. select show code for your website
3. select the language of the page
4. select which editor you have (different editors require different approach, select 'generic' is your editor isn't included)
5. copy the code and read the instructions how to paste the code into your site.

Once the code is copy-and-pasted into your website, go back to the app and:

1. click Add to create a new reservation block inside the calendar.
2. enter a guest name and select the arrival and departure dates and click add
3. click Sync to update your website with the modifications.

If you need more options or have more than one accommodation, please click check the pro versions

It does not work

Please check the following minimum steps:

1. Click 'Accommodations' and select an accommodation.
2. Check if you entered a Display name.
3. Scroll down and check if you entered a Default price per night.
4. Scroll down to INTEGRATION ON YOUR WEBSITE and click 'create booking button'.
5. Copy the code and paste it into your editor.
6. Click the 'Update' button in the menu bar.
7. Refresh the page in your browser (or empty the cache).

iCal checklist

Export and import can be complicated, so please read the following sections completely before starting with it:

3rd party = Booking.com/Airbnb/VRBO/etc

1) 3rd party booking not visible in Booka.place

If a booking made with by third parties (Booking.com/AirBnB/etc) does not automatically appear in the Booka.place calendar on your website or in the dashboard, please check the following points:

1. Working in the section 'Bookings'? Check the checkbox 'Show imported iCals' in the top right corner.

2. Did you activate the import option in the dashboard?
3. Did you paste the right URL for the right accommodation?
4. Was the URL accepted by clicking the red 'Update iCal settings' button?
5. Did you click the red UPDATE button in the top bar after this?
6. Try to find out with what frequency the third-party platform exports bookings. If the third-party provider only exports bookings 4 times a day, it will take up to 6 hours before you can see the booking.
7. Control which bookings are actually exported by the 3rd party with the iCal Validator - Copy the used 3rd party URL and paste it to see directly which bookings are exported. Repeat this for all used 3rd party URL's.
8. If a booking is not or not yet exported by the 3rd party it will not be visible in Booka.place!
9. Check live at what time Booka.place did actually import your import URL's - go to Live iCal Status - Check the status of your iCal imports and exports and enter your account name to get the latest results.
10. Check if there occurred an error during the import of your 3rd party URL - go to Live iCal Status - Live Errors during iCal synchronisations and see if the URL you used caused a problem recently.
11. So far no indication of the problem? Refresh your browser to see if this is the problem: How to refresh a page?
12. Problem not solved? -> use the form to report the bug.

Read the Help about Synchronisation

2) Booka.place booking (not) visible on 3rd party platform

1. Did you activate the export option in the dashboard?
2. Did you copy the right URL for the right accommodation?
3. Did you click UPDATE after this?
4. Try to find out with what frequency the third-party platform imports bookings. If the third-party provider only imports bookings 4 times a day, it will take up to 6 hours before you see the booking in their calendar.
5. If the booking is also not visible in the calendar on your own website refresh the page that contains the calendar: How to refresh a page?
6. Control which bookings are exported by Booka.place with the iCal Validator - Copy the Booka.place export URL and paste it to see directly which bookings are exported.
7. Problem not solved? -> use the form to report the bug.

Read the Help about Synchronisation

3) Unknown booking

1. Go to the Booka.place dashboard (https://booka.place/login/) and
2. check in the Your Bookings section if 'Show imported iCals' is checked.
3. Then click at the date that is blocked to see all bookings on that date.
4. A) Booking from Booka.place can be edited by clicking the small edit icon.
5. B) Bookings form other platforms (Airbnb/Booking/etc) are just shown. To edit these bookings go to the bookingplatform.
6. Check that you used the correct URL in the Booka.place dashboard - section Accommodations - Export/Import
7. The only way to edit a booking from e.g. Airbnb is to login at Aribnb and edit the booking using their platform.
8. If the booking platform does not cooperate (in time), you can remove this source from you iCal settings (for this accommodation)

Read the Help about Synchronisation

Live iCal status

Check the status of your iCal imports and exports

Here you can check in real time when your iCal resources were last imported and exported.

Enter your account name (and if you have multiple Booka.place apps the correct number) and click 'Get info'.

Live Errors during iCal synchronisations

If Booka.place finds problems when retrieving third-party reservations then these are reported in public log files.
For privacy reasons, only the public failed url is published, so first look for the exact url you are using in the Booka.place dashboard (tip: copy it to the clipboard) and and then search for it on the following pages:

Busy ....

Busy ....

Info:
These errors are reported by our servers at the moment of retrieving the iCal file specified by you in the Booka.place dashboard.
Wikipedia explication of server errors

Please note that these errors proof that our servers are working fine. We cannot improve the quality of externally provided iCal files. Please contact the company offering the files.

Live iCal validator

Use the iCal Validator to see the content of any iCal file live.