Adding the Direct booking widget to a Wix Velo site

To install our Direct booking widget on a Wix site, you'll need to follow some additional steps, outlined below.

Video Walkthrough

Step-by-step Instructions

First, open up your Wix site to edit, and make sure that you have Dev Mode enabled. In my example site here, I've enabled Dev mode from the top toolbar:

Once you're in dev mode drop the Hospitable widget onto your property page, as you normally would, but we're going to add an extra section above it.

Here's an example of what your HTML Contents should look like for the Direct widget on your Wix site:

<script>   
window.onmessage = function(event){ window.parent.postMessage(event.data, '*');  }; 
</script>

<iframe id="booking-iframe" sandbox="allow-top-navigation allow-scripts allow-same-origin" style="width: 100%; height: 900px" frameborder="0" src="https://booking.hospitable.com/widget/yourwidgetid/yourpropertyid"></iframe>

To get the <iframe> code for your particular widget, open Hospitable -> Direct -> Open your widget in edit mode -> Find the correct property -> Copy widget code.

Example:

One final step, we need to add some code to masterPage.js to capture the messages sent by the widget and perform the redirects when a guest clicks 'Request to book'.

To do this, open Page Code in your Wix editor, and open masterPage.js, you may have other content in here depending on your site, but we need to add a snippet:

import wixLocation from 'wix-location';

$w.onReady(function () {
  $w("#html1").onMessage( (event) => {
    let receivedData = event.data;
    wixLocation.to(event.data.hospitable_widget_redirect);
  });
});

One thing needs to be adjusted here to your site:

$w("#html1") - This needs to match the ID of the HTML Component that you added containing the Hospitable Direct widget (You should also ensure this ID is the same across all pages containing different properties/widgets, if you have multiple properties).

The screenshot below shows how you can see, and change the ID from the Wix editor:

Save and Publish your site, and try the widget out. Once you select dates and hit 'Request to book', you should be directed into the Hospitable booking flow.