Skip to content

Booking: Advanced Modal Usage

This section describes how to use the modal with javascript and it’s not the recommended usage since it requires basic knowledge of javascript and browsers. However there are use cases when this is necessary, e.g. if routes are driving the modal.

The implementation is similar to the embedded implementation but a javascript function that is attached to the document window is used instead. The functions are attached to the window when the SDK initiate so we recommend to load the SDK as early as possible.

Javascript usage of modal

Section titled “Javascript usage of modal”

  1. Add the following script to your head:

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

  2. Now it’s possible to open the modal by invoking a function called openModal which can be accessed at window.caspecoBooking.openModal(options). The options is an object containing the attributes for the modal.

    window.caspecoBooking.openModal({
        system: "<your system id here>",
        unit: "<your unit id here>",
    });

Example of a button opening the modal with javascript:

<html>
    <head>
        <script src="https://booking.caspeco.net/sdk"></script>
    </head>
    <body>
        <button
            onclick="window.caspecoBooking.openModal({system: 'se__testbb', unit: '13', activityBooking: 'true'})"
        >
            Book now
        </button>
    </body>
</html>
Section titled “Modal close”

If there is a need to close the modal from code it can be done by calling window.caspecoBooking.closeModal(). This will close the modal without any event being called and no notice will be shown to the user.

Section titled “Modal close event”

If the user closes the modal with the normal flow we will send an closeModal event. This is possible to listen to by catching the event messages for caspeco-booking-event and looking for the type closeModal.

<script>
    window.addEventListener("message", (m) => {
        if (m.data.name === "caspeco-booking-event" && m.data.type === "closeModal") {
            console.log("Modal close event received:", m);
        }
    });
</script>

This allows you to react on the modal closing in the manner you find best fit.

Advanced full example