<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <!-- 1. Install booking engine loader script as close to the opening <head> tag as possible. -->
        <script src="https://api.mews.com/distributor/distributor.min.js"></script>
        <title>My page</title>
    </head>
    <body>
        <!-- 2. Add form with date inputs. -->
        <form id="date-form">
            <label for="start">Start date:</label>
            <input type="date" id="start" name="start" required />
            <label for="end">End date:</label>
            <input type="date" id="end" name="end" required />
            <input type="submit" id="dates-submit" value="Loading..." disabled />
        </form>

        <script>
            // 3. Initialize Booking Engine Widget just before the closing </body> tag.
            Mews.Distributor(
                // Set Configuration ID of your booking engine.
                {
                    configurationIds: ['Your booking engine Configuration ID'],
                },
                // Add callback which will enable Submit button and open the Booking Engine Widget upon button click.
                function (api) {
                    // Listen on submit and when user submits, open booking engine with given dates.
                    const listenOnSubmit = () => {
                        // Find the form in DOM and listen on submit.
                        const form = document.getElementById('date-form');

                        form.addEventListener('submit', event => {
                            // Don't use the default submit button behavior. We want to handle it ourselves.
                            event.preventDefault();
                            // Get the dates from the date form.
                            const { start, end } = event.target.elements;
                            const [startYears, startMonths, startDays] = start.value.split('-');
                            const [endYears, endMonths, endDays] = end.value.split('-');

                            const startDate = new Date(startYears, startMonths - 1, startDays);
                            const endDate = new Date(endYears, endMonths - 1, endDays);
                            // Use the Booking Engine Widget Javascript API to set the dates in the widget and open it.
                            api.setStartDate(startDate);
                            api.setEndDate(endDate);
                            api.open();
                        });
                    };

                    listenOnSubmit();

                    // Enable the submit button, because the Booking Engine Widget is ready to be used.
                    const enableSubmit = () => {
                        const submitButton = document.getElementById('dates-submit');
                        submitButton.value = 'Submit';
                        submitButton.disabled = false;
                    };
                    enableSubmit();
                }
                // 4. Note - this guide is written for the Production environment.
            );
        </script>
    </body>
</html>