Learn how to connect Mews PMS booking engine to your Wix hotel website. Custom date pickers, room-specific bookings, and direct booking flows without redirecting guests.
If you run a hotel, inn, or hostel on Mews and your website is built on Wix, you have probably already tried embedding the Mews Booking Engine. And you have probably noticed it does not work the way you expected.
The default Mews embed options (a link that opens in a new tab, or a basic iframe) feel disconnected from your website. Guests leave your site, lose trust, and some never complete their booking. That is a real cost. Every redirect is a lost opportunity for a direct booking.
The good news is that Mews does offer a JavaScript widget that can open the booking engine directly on your Wix pages, without redirects and without opening a new tab. But making it work properly on Wix requires a specific technical approach, because Wix handles JavaScript differently than platforms like Webflow or Squarespace.
In this guide, I will walk you through the integration strategy step by step, based on real projects I have delivered for Wix-based hospitality businesses using Mews.
Why the default Mews embed falls short on Wix
Most hotel owners start with one of two options from Mews:
- A direct link to the Mews booking URL, which opens in a new tab.
- An iframe embed, which loads the booking engine inside a small box on the page.
Both options create friction. The link breaks the guest experience by taking them away from your brand. The iframe is cramped, does not resize properly, and feels like a different website altogether.
What you actually want is the Mews Booking Engine Widget (JavaScript), which launches a full-screen overlay directly on your page. Guests never leave your site. They see your branding, your domain, and a smooth booking flow.
One important note: many hotel owners assume they need the Mews API for this. That is not the case. The JavaScript widget handles date selection, room filtering, promo codes, and more. The API requires a Mews Enterprise subscription. The widget works on all plans.
The challenge with Wix specifically
Wix is a powerful website builder, but it handles custom code differently than other platforms. Here is what makes Mews integration on Wix trickier:
No direct DOM access from page scripts. On Webflow, you can drop a script tag into the page body and interact with elements directly. On Wix, custom scripts run in a sandboxed environment, which limits how you can trigger the Mews widget.
Custom HTML lives in iFrames. When you add an HTML embed on Wix (for example, a custom date picker), it renders inside an iFrame. The Mews widget, which needs to open as a full-page overlay, gets trapped inside that small iFrame box instead of covering the whole screen.
Velo by Wix adds power, but complexity. Wix Velo (their JavaScript development platform) lets you fetch data from CMS collections and handle events, but connecting that to external scripts like Mews requires careful coordination.
These are solvable problems. But they require a specific integration architecture.
The integration approach: how it works
Here is the high-level strategy for making Mews work beautifully on Wix. I am not going to share raw code here, but I will explain the concepts clearly so you understand what is involved.
Step 1: Add the Mews script to your site header
The first step is loading the Mews JavaScript library on every page of your site. This goes into the Wix site-wide header code (under Settings > Custom Code). Once loaded, the Mews widget becomes available to trigger from anywhere on the site.
You will need your Mews Configuration ID for this step. You can find it in your Mews Commander under your Booking Engine settings. If you have multiple booking engines (for example, one for rooms and one for events), you will need multiple Configuration IDs.
Step 2: Build a custom date picker
The default Mews widget opens without pre-selected dates. That is not ideal. You want guests to pick their check-in and check-out dates on your website first, then have the Mews checkout open with those dates already filled in.
To achieve this, you build a custom date picker component. On Wix, this is typically done as a Custom HTML element that displays a clean calendar interface matching your brand. The date picker collects check-in date, check-out date, number of guests, and optionally a promo code.
Step 3: Use postMessage to bridge the iFrame gap
Here is where the Wix-specific architecture matters. Because the date picker lives inside an iFrame, it cannot directly trigger the Mews widget on the parent page. The solution is the postMessage API, a standard browser feature that allows safe communication between an iFrame and its parent page.
When a guest selects their dates and clicks "Book," the date picker sends a message to the parent page with the booking parameters. A listener script on the parent page receives this message and opens the Mews widget with the correct dates, room type, and guest count already applied.
This is the critical piece that makes the integration feel seamless. The guest clicks one button and the Mews checkout slides in as a full-page overlay, right on top of your website.
Step 4: Connect room-specific bookings with your Wix CMS
If your property has multiple room types, you probably want guests to be able to book a specific room directly from its page. Not just browse rooms and then figure out the booking engine.
The approach is to create a Wix CMS collection for your rooms. Each entry includes the room name, description, images, and critically, the Mews Room ID. When a guest visits a room page and clicks "Book This Room," the page uses Wix Velo to fetch the Mews Room ID from the CMS and pass it to the date picker. The booking engine then opens pre-filtered to that specific room.
This also has a strong SEO benefit. Each room gets its own page with unique content, images, and meta descriptions, which gives Google more pages to index and rank.
Step 5: Handle special booking flows (events, workshops, packages)
Some properties offer more than just rooms. If you run workshops, events, or special packages, you can create dedicated booking flows that automatically set the right dates and rate categories.
For example, if you use Wix Events, you can connect the event database to your booking flow. When a guest selects a workshop, the integration automatically pre-fills the correct dates and applies the appropriate Mews rate, so the checkout opens with everything ready. No manual matching, no friction.
What the result looks like for your guests
When done properly, here is what the guest experience becomes:
- They land on your website (through Google, social media, or a direct link).
- They browse your rooms, read about your property, and feel confident in your brand.
- They pick their dates on a clean, on-brand date picker.
- The Mews booking engine opens instantly as a smooth overlay, still on your website.
- They complete the booking without ever leaving your domain.
No redirects, no new tabs, no confusion. The whole flow lives on your site, under your brand.
This is exactly what we built for The Landgrove, a 20+ room inn and art studio in Vermont running Wix and Mews. They needed general room bookings, room-specific pages, and a dedicated workshop booking flow, all working seamlessly on their Wix site. After the integration, their guests can browse rooms, pick dates, and complete a booking without ever leaving the website.
The impact was immediate. As Bruce Haupt, the innkeeper, put it:
"Most actually do book direct on our website now (hooray!!!!). An incredible improvement." Bruce H., Innkeeper, The Landgrove
For properties that implement this approach, the difference in direct bookings is real. Fewer guests abandon the process, and more reservations come through your website instead of through OTAs like Booking.com where you pay 15-20% commission on every reservation.
Can you do this yourself?
Technically, yes. The Mews JavaScript widget is documented, and Wix Velo provides the tools to build custom interactions. If you are comfortable with JavaScript and understand how postMessage works between iFrames and parent pages, you can build this integration yourself.
That said, here is what I have seen from working with multiple Wix + Mews properties:
The date picker requires careful design. It needs to look good on mobile and desktop, handle date validation, and communicate reliably with Mews. Building a date picker that actually works well across all devices takes more time than most people expect.
Wix's iFrame restrictions create edge cases. The postMessage bridge works, but debugging issues between the iFrame and the parent page can be time-consuming if you are not familiar with the pattern.
Multiple booking flows multiply complexity. If you only need basic room bookings, the integration is straightforward. But if you need room-specific pages, event-based flows, or multiple Mews Configuration IDs, each layer adds complexity.
Mews updates can break things. Mews occasionally updates their widget behavior. Having someone who monitors these changes and adjusts the integration when needed saves you from surprise breakdowns during peak booking season.
What I offer for Wix + Mews properties
I specialize in connecting Mews PMS to hotel websites, including Wix sites. Here is what a typical project includes:
Custom date picker that matches your brand, handles all date logic, and works perfectly on mobile.
Full Mews widget integration using the postMessage architecture, so the booking engine opens as a seamless overlay on your site.
Room-specific booking pages connected to your Wix CMS, each with its own Mews Room ID for direct booking.
Event or workshop flows if your property offers special experiences, connected to your Wix Events database.
Testing and QA across devices and browsers to make sure every flow works reliably.
The typical timeline is 2-3 weeks from kickoff to launch.
If you are running a property on Mews with a Wix website and you want your guests to book directly on your site, I would be happy to discuss your setup. Book a free consultation to see how the integration would work for your specific property.