Setting up the Mews Booking Engine with multiple enterprises

Distributor APIMews APIMews Multi-Property
You can set up the Mews Booking engine with multiple enterprises and set preselected city/location.

Note: Properties with Enterprise tier subscription only can set up the Mews Booking Engine with multiple enterprises.  


In this article you can learn about:  

The pre-requisites

Make sure you fulfill all the required pre-requisites. If you don't, the code for the use cases can be hard to understand or the behavior of the code can differ.
 

The code 

Comments with numbers have more details below the code. Note: This guide is for the production environment. If you want to test this code in a different environment, please refer to the guide for testing in demo/staging/testing environment .

Code uses an example scenario with three hotels, one in Paris and two of them from the same London location. 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <!-- 1. Install Distributor 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 buttons for opening Distributor with specific location preselected -->
        <button disabled type="button" id="london-button">Loading...</button>
        <button disabled type="button" id="paris-button">Loading...</button>

        <script>
            // 3. Initialize Distributor Widget just before the closing </body> tag.
            Mews.Distributor(
                // 3.1 Set configuration ids of your Distributor.
                {
                    configurationIds: [
                        'Configuration id of first London hotel',
                        'Configuration id of second London hotel.',
                        'Paris hotel configuration id',
                    ],
                },
                // Add callback which will make the buttons open Distributor Widget and set the city/location.
                function (api) {
                    const initializeButton = (buttonId, cityId, buttonText) => {
                        const buttonElement = document.getElementById(buttonId);

                        buttonElement.addEventListener('click', event => {
                            event.preventDefault();

                            // Use Distributor Widget API to set the city/location and open the Distributor Widget.
                            api.setCity(cityId);
                            api.open();
                        });

                        buttonElement.innerHTML = buttonText;
                        buttonElement.disabled = false;
                    };

                    // 3.2 Prepare the city ids.
                    const londonCityId = 'Your London city id';
                    const parisCityId = 'Your Paris city id';

                    initializeButton('london-button', londonCityId, 'London hotels');
                    initializeButton('paris-button', parisCityId, 'Paris hotel');
                }
                // 4. This guide is for production environment.
            );
        </script>
    </body>
</html>



Setting up the booking engine  

Step 1: Install the Mews Booking Engine loader script

Step 2: Add buttons for opening the Mews Booking Engine with specific city preselected

Buttons are disabled on page load, so users can't click the buttons until the Mews Booking Engine widget is ready to use. We enable it later when it's ready.
 

Step 3: Initialize Mews Booking Engine widget

  1. Set configuration ids of your Mews Booking Engine

If you are not sure where to find the configuration ids, see where can I get configuration id for details.
 

  1. Prepare the city ids

Even though it's called location in the UI, the API needs a city id.
  • If you are not sure where to find the city id, see where can I get city id for details.
  • If you have several hotels from the same city/ location, the city id is the same in all of them. So use the first one that you find.

This guide is for the production environment If you want to test this code in a different environment, please refer to the guide for testing in demo/staging/testing environment.

The Mews Booking Engine Widget API supports more than preselecting city/location and opening it. See the other Mews Booking Engine Widget API options to find other options you could use.

You can also check out some other use cases here.

 
Was this article helpful?
10



Feedback