Booking: Quick Start

The Caspeco Booking SDK allows you to easily integrate Caspeco’s booking system into your web application.

The application can be run as a modal adding the caspeco-booking-widget class to a clickable element. For accessability a button element is recommended.
Specify the data-attribute for your application to open it with the correct langauge and system.

Add the following script to your head:

<script src="https://booking.caspeco.net/sdk"></script>

Add a clickable element with the class caspeco-booking-widget your system and unit to your body.

<button
    class="caspeco-booking-widget"
    data-system="<your system name>"
    data-unit="<your unit number>"
>
    Book Now
</button>

Example:

<html>
    <head>
        <script src="https://booking.caspeco.net/sdk"></script>
    </head>
    <body>
        <button
            class="caspeco-booking-widget"
            data-system="se__testbb"
            data-unit="13"
            data-lang="en-GB"
        >
            Book Now
        </button>
    </body>
</html>

Test it HERE

Use application embedded

It’s possible to embedd the booking into your website.
This is done by adding a <Caspeco-Booking> tag in the DOM and providing the system, unit and lang attributes.

Add the following script to your head:

<script src="https://booking.caspeco.net/sdk"></script>

Add an element called Caspeco-Booking with the attributes for your system and unit to your body.
```
<Caspeco-Booking system="<your system id here>" unit="<your unit id here>" />
```

Example of embedded solution:

<html>
    <head>
        <script src="https://booking.caspeco.net/sdk"></script>
    </head>
    <body>
        <Caspeco-Booking system="se__testbb" unit="13" lang="en-GB" />
    </body>
</html>

Test it HERE

Attributes

system

This is an identifier that identifies you as a customer. You can find it in the backoffice for Booking when entering booking > administration > bookingAdministration https://rms.caspeco.se/booking/administration/bookingAdministration

If you use the booking as a modal it is provided as a property called data-system.

<button
    class="caspeco-booking-widget"
    data-system="<SYSTEM ID HERE>"
    data-unit="<unit id>"
    data-lang="<lang id>"
>
    Book Now
</button>

If you use it embedded the system is provided as a property called system on the Caspeco-Booking tag.

<Caspeco-Booking system="<SYSTEM ID HERE>" unit="<unit id>" lang="lang id>.

Unit ID

The unit ID correspons to the establishment, e.g a specific restaurant under your organization. It can be find in the backoffice for booking

For the modal solution it’s called data-unit while if you run it embedded it is passed as unit

Setting Language

A field that will determine what language the application will run in. It defaults to Swedish. Supported languages include:

en-GB: English
sv-SE: Swedish
nb-NO: Norwegian
da-DK: Danish
fi-FI: Finnish
es-ES: Spanish
fr-FR: French
fr-BE: French (Belgium)
nl-NL: Dutch
nl-BE: Dutch (Belgium)
de-DE: German
de-BE: German (Belgium)
et-EE: Estonian
lt-LT: Lithuanian
lv-LV: Latvian

By default the modal opens centred over your page. Add data-position to dock it to a corner instead:

<button
    class="caspeco-booking-widget"
    data-system="se__testbb"
    data-unit="13"
    data-position="bottom-right"
>
    Book Now
</button>

Use bottom-right or bottom-left. Your page stays visible and usable behind the panel. On screens narrower than 769px the modal opens full screen regardless, so it stays comfortable on phones.

See the attributes reference for the full list.