If you run a hotel or inn on Mews and your website is built on Squarespace, you are probably dealing with a frustrating gap. Your website looks great, your PMS works fine, but the booking experience feels disconnected. Guests click "Book Now" and get sent to a different page, a different domain, or a clunky iframe that does not match your design.

The good news is that Mews offers a JavaScript widget that can open the booking engine as a smooth overlay directly on your Squarespace pages. No redirects, no new tabs. But getting it to work properly on Squarespace requires understanding how the platform handles custom code, because it is different from Wix or Webflow.

In this guide, I will walk you through the integration strategy and what to expect if you want Mews to work seamlessly on Squarespace.

Why the default Mews embed does not work well on Squarespace

Most hotel owners start with one of two options from Mews:

1. A direct link to the Mews booking URL, which opens in a new tab.
2. An iframe embed inside a Squarespace Code Block, which loads the booking engine in a small box on the page.

The link option breaks the guest experience. They leave your beautifully designed Squarespace site and land on a generic Mews page. Trust drops, and some guests never complete the booking.

The iframe option looks cramped. It does not resize well, especially on mobile, and it feels like a foreign element on your page.

What you actually want is the Mews Booking Engine Widget (JavaScript). This opens a full-screen overlay that sits on top of your page. Guests stay on your domain, see your branding, and complete the booking without leaving your site.

Important: you do not need the Mews API for this. The JavaScript widget handles dates, room selection, guest counts, and promo codes. The API requires a Mews Enterprise subscription. The widget works on all Mews plans.

What makes Squarespace different from Wix or Webflow

If you have looked at guides for integrating Mews on Wix or Webflow, you might assume the approach is the same on Squarespace. The core concept is similar (using the Mews JavaScript widget with a custom date picker), but Squarespace has its own constraints.

Code Injection instead of a development framework. Squarespace does not have an equivalent to Wix Velo or Webflow's custom code flexibility. You add JavaScript through Code Injection (site-wide via Settings > Advanced > Code Injection) or through Code Blocks on individual pages. This is standard JavaScript, which is actually simpler in some ways, but it means you are working within Squarespace's rules.

Code Blocks live in iFrames. When you add a Code Block with custom HTML on a Squarespace page, it renders inside an iFrame, just like on Wix. This means the Mews widget, which needs to open as a full-page overlay, can get trapped inside the Code Block instead of covering the whole screen. The solution is the same: using the postMessage API to communicate between the iFrame and the parent page.

No flexible CMS for dynamic data. This is the biggest difference. On Wix you can create a CMS collection for your rooms and store the Mews Room ID as a custom field. On Webflow, same thing. On Squarespace, the CMS is more rigid. You cannot easily add a custom "Mews Room ID" field to your pages and have the code read it dynamically. This means room-specific booking flows need a different approach.

Business plan required for site-wide Code Injection. If you want the Mews script to load on every page of your site (which is the cleanest setup), you need the Squarespace Business plan or higher. Code Blocks work on all plans, but they are page-specific.

The integration approach for Squarespace

Here is how the integration works, step by step.

Step 1: Add the Mews script via Code Injection

The Mews JavaScript library needs to load on your site. The cleanest way is through Code Injection in your Squarespace settings (Settings > Advanced > Code Injection > Header or Footer). This loads the Mews script on every page, making it available whenever you need to trigger the booking widget.

You will need your Mews Configuration ID from your Mews Commander Booking Engine settings.

Step 2: Build a custom date picker in a Code Block

Just like on Wix, the best guest experience starts with a date picker on your website. Guests select their check-in and check-out dates, number of guests, and optionally a promo code, then click "Book" and the Mews checkout opens with everything pre-filled.

On Squarespace, you build this as a custom HTML/CSS/JavaScript component inside a Code Block. The date picker is self-contained: the HTML, CSS, and JavaScript all live in the same Code Block. This makes it portable, you can place it on your homepage, your rooms page, or anywhere else.

Step 3: Use postMessage to open Mews on the parent page

Because the Code Block renders in an iFrame, the date picker cannot directly trigger the Mews widget on the parent page. The solution is the postMessage API, a standard browser feature for safe communication between an iFrame and its parent window.

When the guest clicks "Book," the date picker sends a message containing the selected dates, guest count, and any other parameters to the parent page. A listener script (added via Code Injection) receives this message and opens the Mews widget as a full-page overlay.

This is the same approach used on Wix. The postMessage bridge is the key technical piece that makes the integration feel seamless regardless of the platform.

Step 4: Handle room-specific bookings without a CMS

Here is where Squarespace differs most from Wix and Webflow. On those platforms, you can store the Mews Room ID in a CMS field and have the code read it dynamically. On Squarespace, the CMS does not support custom fields the same way.

There are a few ways to handle this:

Option A: One date picker per room page with hardcoded Room IDs. You create a separate Code Block for each room page, with the Mews Room ID included directly in the code. When a guest clicks "Book This Room" on the Deluxe Suite page, the date picker already knows which Room ID to pass to Mews. This is straightforward but means you have a slightly different Code Block on each room page.

Option B: A room selector dropdown in the date picker. Instead of relying on the CMS, you build the room selection into the date picker itself. The guest picks their room from a dropdown, then picks their dates, and the correct Room ID is passed to Mews. This keeps one single Code Block that works on any page.

Option C: Use URL parameters or page-specific Code Injection. Each room page can have its own per-page Code Injection that sets a variable (like the Room ID), which the global date picker script then reads. This is cleaner than duplicating the entire Code Block but requires page-level code management.

None of these options are as elegant as a full CMS integration, but they work reliably and the guest never notices the difference.

Step 5: Handle events or special booking flows

If your property offers experiences, packages, or seasonal specials, you can create dedicated booking flows on Squarespace. The approach is similar to room-specific bookings: either a dedicated Code Block with the right Mews parameters, or a dropdown that lets guests choose what they want to book.

Since Squarespace does not have an events database like Wix Events, you manage this through the code itself. For properties with a small number of experiences, this works well. For properties with a large and frequently changing events calendar, this is where the platform starts to feel limiting.

What the result looks like for your guests

When the integration is done properly, the guest experience is the same as on any other platform:

1. They land on your Squarespace website and browse your property.
2. They pick their dates on a clean, on-brand date picker.
3. The Mews booking engine opens instantly as a smooth overlay, still on your website.
4. They complete the booking without ever leaving your domain.

This is the same approach we have implemented for properties on Wix, where innkeepers have reported that guests now book directly on their website instead of through OTAs. As Bruce Haupt from The Landgrove put it after his Wix + Mews integration: "Most actually do book direct on our website now."

The platform is different, but the result is the same. Your guests stay on your site, and you keep the revenue that would otherwise go to OTA commissions (typically 15-20% on Booking.com).

Should you stay on Squarespace or consider switching?

This is a question I get from hotel owners regularly. Squarespace is a beautiful platform and works well for many properties. If your needs are straightforward (general room bookings, a clean date picker, and a seamless checkout), the Mews integration on Squarespace works great.

However, if you need complex flows like room-specific bookings with dynamic CMS data, event-based booking, or multiple booking engines, the lack of a flexible CMS on Squarespace does add friction to the setup and to future maintenance.

In those cases, it may be worth considering Webflow or even Wix, which offer more CMS flexibility for the same integration approach. That said, a platform migration is a bigger decision and should not be driven by the booking integration alone. I can help you evaluate both options.

What I offer for Squarespace + Mews properties

I specialize in connecting Mews PMS to hotel websites across all major platforms, including Squarespace. Here is what a typical integration project includes:

Custom date picker designed to match your Squarespace theme, fully responsive on mobile and desktop.

Full Mews widget integration using Code Injection and postMessage, so the booking engine opens as a seamless overlay on your site.

Room-specific booking flows adapted to Squarespace's architecture, using the approach that best fits your property's needs.

Testing and QA across devices and browsers.

Training videos so you can confidently maintain your website after the integration is live.

If you are running a property on Mews with a Squarespace website and you want your guests to book directly on your site, book a free consultation to see how the integration would work for your specific setup.

Book a Free Consultation →

Related articles

• How to Integrate Mews Booking Engine on Your Wix Website (Step-by-Step)
• How to display your Mews Booking Engine on your hotel's landing page
• How to connect your PMS to your website for direct bookings?

‍