Distributor Widget

Note: In order to embed the distributor into your webpage, your site must be securely served over https. Any distributor widget that is implemented on an insecure http site will be redirected to the standalone distributor.

Script

Include the following Distributor loader script into your website:

<script src="https://www.mews.li/distributor/distributor.min.js"></script>

The script should be included in the<head>section (do not attach theasyncattribute). The script size is kept as minimal as possible (cca 11 kB gzipped) to allow quick webpage initialization. The widget script is then downloaded asynchronously and inserted automatically into your website afterwards.

Please note that serving the script from our CDN servers ensures seamless releases of new features, bugfixes and improvements. Therefore, we discourage you from packing the contents of this script into your own JavaScript bundle. Make sure to follow the recommended way of including the scripts via<script>HTML tag.

Content Security Policy

If you have a CSP setup on your website, the following domains should be enabled for distributor to function correctly.

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

The final datatrans url is for PCI Proxy which is the secure, PCI-DSS complaint solution that is used by our Merchant to process payment cards.

Usage

Once the Distributor loader script is processed by the browser, you can initialize the Distributor widget with the following code.

Important: The initialization needs to be called only after the website is loaded, to ensure everything is ready. The easiest way to achieve this is to place it just before the closing</body>tag.

This creates a isolated (iframe based) overlay on your website and loads Distributor into it.

<!-- Distributor's initialization call, creating new instance of Distributor. Use id of your Distributor configuration. -->
<script>
Mews.Distributor({
configurationIds: [
'Your Distributor configuration id'
],
openElements: '.distributor-open'
});
</script>

Do not forget to replace the placeholder Your Distributor configuration id with a real Distributor configuration id. You can get your Distributor configuration id from the configuration’s detail page in Mews Commander. The id is shown there as Identifier in formataaaa-bbbb-cccc-dddd-eeeeeeee.

The overlay is not visible by default - to actually display it, you should bind its opening to some action (i.e. clicking on a button). Distributor can do it automatically for you, if you provide the second optionopenElements- a string of comma-separated CSS selectors of elements, whose click events will be binded with opening of Distributor. The event is delegated, so you can pass selectors to elements that don’t exist during the load of website. You can get more info on how the selectors can look like here for example.

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

Advanced usage

If you need a more specific setup for opening Distributor, or you want to call some API functions on a Distributor instance, you can provide a callback function as the second argument to the initialization call - the instance is provided as an argument to the callback.

Very common example for this is using a custom start and end date selectors that are part of your website and then passing user’s selection to Distributor.

<!-- Example of setting custom dates. Useful if you have i.e. own calendars on website. -->
<script>
Mews.Distributor({
configurationIds: [
'Your Distributor configuration id'
]
},
function (distributor) {
// you can call API functions on a distributor instance here
// set different start and end date
distributor.setStartDate(new Date(2018, 1, 1));
distributor.setEndDate(new Date(2018, 1, 3));
});
</script>

To see a list of all available API calls, please consult API section.

Closing of Distributor is provided in the overlay by default, so you don’t have to worry about that.

Chain Distributor

Distributor can run in two basic modes - for a Single property or for a Chain. The mode is chosen automatically during initialization, based on the count of hotel ids you have provided in the options. Whenever two or more hotels are loaded, the Distributor will start in the Chain mode. That means that it will add one more step to the booking flow - hotel selection. To add more hotels, simply pass ids of their configurations into theconfigurationIdsarray option:

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

Styles

Distributor does not use separate CSS files, everything is packed inside the script. For possible customizations, consult Customization section.

Done!

This is all you need for the basic setup of Mews Distributor.