Getting started

PreviousBooking Engine Widget NextUse cases

Last updated 1 year ago

Was this helpful?

Getting started

By using the Booking Engine Widget, your users can book directly from your website. To use the Booking Engine Widget, follow these steps:

In addition, you also have the following options:

Warning: In order to embed the booking engine into your webpage, your site must be securely served over HTTPS. Any Booking Engine Widget that is implemented on an insecure HTTP site will be redirected to the .

Step 1: Install booking engine loader script

To use the Booking Engine Widget, you need to install the booking engine loader script with a code snippet provided in the section below. The script will asynchronously prepare global object Mews.Distributor which you're going to use in further steps to initialize the Booking Engine Widget.

Requirements

Use the code snippet 'as is' and as described, doing otherwise may cause unexpected problems and is not supported.

Do not place the code snippet anywhere else than in the <head>
Do not modify the code snippet in any way and do not attach the async attribute
Do not use the code snippet inside an iframe
Do not add the URL (e.g. https://app.mews.com/distributor/aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee) to the iframe
Do not pack the contents of the script files that the code snippet references into your own JavaScript bundle
Do not use a booking engine script cached by your server, use the one from this Guide – see

The script file size is kept as minimal as possible (approx 11 kB gzipped) to allow quick web page initialization. Also, serving the script from our CDN servers ensures seamless releases of new features, bug fixes and improvements.

Installation

Place the following <script> code snippet in the <head> of your web page's HTML, preferably as close to the opening <head> tag as possible.

Correct:

<script src="https://api.mews.com/distributor/distributor.min.js"></script>

Incorrect - DO NOT DO THIS:

<script src="https://www.your_domain.tld/wp-content/cache/min/1/distributor/distributor.min.js?ver=1628071961"></script>
<script async src="https://api.mews.com/distributor/distributor.min.js"></script>
<script src="https://apps.mews.com/distributor/prerelease/production/3.924.4/distributor.js"></script>
<iframe src="https://api.mews.com/distributor/distributor.min.js"></iframe>
<iframe src="https://api.mews.com/distributor/aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee"></iframe>

Content Security Policy

If you have a Content Security Policy (CSP) set up on your website, the following domains should be enabled for the booking engine to function correctly:

*.mews.com
https://www.recaptcha.net
https://www.google.com/recaptcha/
https://recaptcha.google.com/recaptcha/
https://www.gstatic.com/recaptcha/
https://pay.datatrans.com/upp/payment/js/secure-fields-1.0.0.js

Verifying Content Security Policy Configuration

Once you have configured the Content Security Policy (CSP) for your website to include the necessary domains for the booking engine, it is crucial to ensure that the setup is correct to avoid any operational disruptions. Follow the steps below to verify the configuration:

Step 1: Open the Browser Console

Access the Booking Engine Widget on your website: Navigate through your website to the booking engine.
Open Developer Tools: Use the keyboard shortcut Ctrl+Shift+I (or Cmd+Option+I on Mac) to open the developer tools in your browser.
Select the Console Tab: Focus on the console tab to observe any errors that appear as you proceed through the booking steps.

Step 2: Simulate a Booking

Perform Test Transactions: Go through all the steps of the booking engine, from selection to the checkout screen.
Monitor for Errors: Carefully monitor the console for any CSP-related errors, specifically looking for messages that indicate a refusal to load resources.

Step 3: Confirm Error-Free Configuration

Check for 'Refused to Frame' Errors: Ensure there are no errors such as Refused to frame '_URL_' because it violates the following Content Security Policy directive: '....'. Such errors suggest that the '_URL_' URL needs to be included in your CSP under the correct directive.
Validate Functionality: If no relevant CSP errors appear and the booking process completes successfully, your CSP is configured correctly.

Critical Errors

Pay particular attention to any errors related to key functionalities such as reCAPTCHA and payment processing scripts, which are essential for booking security and integrity:

reCAPTCHA: Ensure domains related to Google’s reCAPTCHA are not blocked:

https://www.recaptcha.net
https://www.google.com/recaptcha/
https://recaptcha.google.com/recaptcha/
https://www.gstatic.com/recaptcha/

Payment Processing: Verify that the PCI Proxy script is allowed:

  https://pay.datatrans.com/upp/payment/js/secure-fields-1.0.0.js

This URL is critical for Mews Payments' PCI-DSS compliant processing capabilities via PCI Proxy.

By following these steps, you can confirm that your Content Security Policy settings are correctly implemented, ensuring the booking engine operates smoothly and securely.

After the website has loaded, and the booking engine loader script has prepared the global Mews.Distributor object, you can initialize the Booking Engine Widget by calling global Mews.Distributor with some arguments.

Warning: Make sure you initialize the Booking Engine Widget by calling Mews.Distributor only after the website is loaded, otherwise the initialization will fail or will not fully complete. The easiest way to achieve this is to place the initialization code inside a <script> tag just before the closing </body> tag, but you can use a different approach if you want.

<!-- booking engine's initialization call, it creates a new instance of the booking engine. Use your booking engine Configuration ID. -->
<script>
    Mews.Distributor({
        configurationIds: [
            'Your booking engine Configuration ID',
        ],
        openElements: '.distributor-open',
    });
</script>

This call creates an isolated (iframe based) overlay on your website and loads the booking engine into it.

Note: The overlay and booking engine is not visible by default - we're going to solve this in the next section.

Step 3: Set up overlay opening

The binding is delegated, so the elements and selectors don't need to exist during load of the website, but you still need to add the HTML elements yourself. Knowing that, you can for example add the following HTML button with class distributor-open (the class name we've used in the initialization code from the previous section), and it will open the Booking Engine Widget overlay upon a click:

<!-- Example of button for opening the booking engine when openElements is set to '.distributor-open' -->
<button class="distributor-open">Book Now</button>

This is just an example, the automatic binding can attach a click event listener to any HTML element.

Note: Closing of the booking engine is provided in the overlay by default, no configuration is needed from your side.

Step 4: All done!

This is all you need for the basic setup of the Mews Booking Engine. Here's a summary of what you've done:

On the web page with this setup, the loader script will prepare Mews.Distributor
After the web page loads, your code will call Mews.Distributor - this will initialize the Booking Engine Widget, create an overlay (hidden for now) and bind opening actions to selected HTML elements such as buttons
When users click these HTML elements, the Booking Engine Widget overlay will open, and they can book through it
Users can close the overlay at any time and see your web page again

This step is optional

If you want to have a more customized setup, or you want to call some Javascript API functions on a booking engine instance to control it, you can provide a callback function as the second argument to the initialization call.

This callback is later called asynchronously with an argument - booking engine instance. By calling methods on this instance you can control the booking engine.

<!-- Example of setting custom dates, useful if you have e.g. your own calendars on your website -->
<script>
    Mews.Distributor(
        {
            configurationIds: [
                'Your booking engine Configuration ID'
            ],
            openElements: '.distributor-open',
        },
        function (api) {
            // you can call API functions on a booking engine instance here
            // set different start and end date
            api.setStartDate(new Date(2022, 1, 1));
            api.setEndDate(new Date(2022, 1, 3));
        }
    );
</script>

Set up as multi-enterprise

This step is optional

<script>
    Mews.Distributor({
        configurationIds: [
            'First configuration id',
            'Second configuration id',
            // and more...
        ],
    });
</script>

PreviousBooking Engine Widget NextUse cases

Last updated 1 year ago

Was this helpful?

Getting started

Getting started

Step 1: Install booking engine loader script

Requirements

Installation

Content Security Policy

Verifying Content Security Policy Configuration

Step 1: Open the Browser Console

Step 2: Simulate a Booking

Step 3: Confirm Error-Free Configuration

Critical Errors

Step 2: Initialize Booking Engine Widget

Step 3: Set up overlay opening

Step 4: All done!

Use callback function to control Widget

Set up as multi-enterprise

Step 1: Install booking engine loader script

Requirements

Installation

Content Security Policy

Verifying Content Security Policy Configuration

Step 1: Open the Browser Console

Step 2: Simulate a Booking

Step 3: Confirm Error-Free Configuration

Critical Errors

Step 2: Initialize Booking Engine Widget

Step 3: Set up overlay opening

Step 4: All done!

Use callback function to control Widget

Set up as multi-enterprise