Send booking data to parent website after booking

Created by Calenso Support, Modified on Fri, 1 Apr, 2022 at 3:04 PM by Calenso Support

INHALTSVERZEICHNIS

Introduction
Example

Introduction

Since version 4.37.1 it is possible to retrieve and process the booking data after the booking in the web page that integrates the iFrame or the web component. This feature is available for appointments and group appointments.

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Parent communication testing for Calenso</title>
</head>
<body>
    <!-- Appointment use-case testing -->
    <iframe
        src="https://widget.calenso.com/?partner=braincept&internal=false&isFrame=true&type=appointment&lang=en_US"
        loading="lazy"
        frameborder="0"
        style="height: 800px; width: 100%; max-width: 840px;"
        scrolling="yes">
    </iframe>

    <!-- Group-appointment use-case testing -->
    <iframe
            src="https://widget.calenso.com/?partner=braincept&internal=false&isFrame=true&type=event&lang=en_US"
            loading="lazy"
            frameborder="0"
            style="height: 800px; width: 100%; max-width: 840px;"
            scrolling="yes">
    </iframe>

    <script type="text/javascript">
        console.log('Script initialized. Going to register message event listener now.');
        function handleMessage(event) {
            console.log('[MsgReceived]', event.data);
        }
        window.addEventListener('message', handleMessage, false);
    </script>
</body>
</html>

After successful booking, the data is available in the handleMessage() function and can be further processed from the website.