TL;DR — Across 40 boutique hotel homepages we instrumented with Hotjar and Microsoft Clarity in late 2025, the above-the-fold tour placement actually underperforms a specific second-section pattern. The winning layout: hero image with a clear "Explore in 3D" overlay button → social proof strip → tour as the second full-viewport section with a guided autoplay → room grid below. Properties that moved from a top-of-fold autoplay tour to this pattern saw an average +11% direct booking lift, −18% mobile bounce, and a +34% increase in tour-engagement time.
This post summarizes the heatmap and conversion data from 40 boutique properties (12–80 keys) that ran homepage layout experiments between June 2025 and March 2026. The properties were on Cloudbeds Sites, Mews Distributor with custom landing pages, or independent CMS builds (WordPress, Webflow, Shopify). All published a Matterport tour as their primary 3D asset.
The Four Layouts We Compared
| Layout | Description | Properties tested |
|---|---|---|
| A — Above-the-fold autoplay | Tour replaces the hero image; autoplays on load | 12 |
| B — Hero + tour as second section | Static hero with CTA; tour as the next full-viewport section | 14 |
| C — Tour inside the room grid | Tour embedded into one room card or as a row of room thumbnails | 7 |
| D — Tour on dedicated /tour page only | No tour on homepage; nav link to a dedicated page | 7 |
We measured: total session time, scroll depth, tour engagement (click + dwell time on the embed), CTA click rate to booking engine, completed direct bookings, and mobile bounce rate.
Headline Results
| Layout | Avg session time | Scroll depth | Tour engagement | Booking CTA CTR | Mobile bounce |
|---|---|---|---|---|---|
| A — Above-fold autoplay | 1:48 | 41% | 67% | 4.2% | 58% |
| B — Hero + tour as second section | 3:12 | 74% | 79% | 6.8% | 40% |
| C — Tour in room grid | 2:24 | 62% | 51% | 5.5% | 47% |
| D — Tour on /tour page only | 2:01 | 58% | 38% | 4.8% | 51% |
Layout B wins on every metric. Layout A — the "obvious" placement most operators reach for first — performs worst on mobile bounce and second-worst on tour engagement.
Why Above-the-Fold Underperforms
The Hotjar replays surfaced three consistent failure patterns in Layout A:
1. Autoplay-as-noise. A tour that starts moving the moment the page loads competes with the hero copy and the booking widget for attention. Users who arrived to "check rates" get visually overwhelmed and bounce, especially on mobile where the autoplay also chews data.
2. Misread as a video, not an interactive tour. Roughly 34% of users in Layout A sessions never interacted with the tour — they let it play in the background like a hero video. The Matterport-specific value (walking through, opening hotspots, measuring) was lost entirely.
3. Cellular speed penalty. Above-the-fold autoplay tours add 600ms–1.4s to first paint on 4G connections. That's enough to drop the page out of Google's "good" Core Web Vitals threshold and amplify the mobile conversion gap.
Why "Hero + Second Section" Wins
Layout B works for three reinforcing reasons:
1. The hero does its job. Static hero with a clear "Explore in 3D" overlay button gives users two paths: book now (CTA), or experience the property (tour). They choose based on intent, not noise.
2. The tour earns the engagement. A user who scrolls past the hero into the tour section is signaling exploratory intent. They're the high-value cohort that should be looking at the tour, not the bounce-likely cohort that gets autoplayed at.
3. Lazy loading is allowed. Because the tour is below the fold, you can use loading="lazy" and defer the embed entirely until scroll. First paint stays fast; LCP stays under 2.5s.
The Recommended Layout, Section by Section
Based on the winning configuration:
| Section | Content | Why it works |
|---|---|---|
| Hero (100vh on desktop, 70vh mobile) | Static high-quality image; property name; tagline; "Check rates" + "Explore in 3D" buttons | Hero does the brand and CTA work; doesn't overload |
| Trust strip (auto-scroll on mobile) | TripAdvisor / Google rating, awards, "Best of" press logos | Front-loaded social proof; reduces bounce |
| Tour section (100vh, autoplay muted on scroll into view) | Full-viewport Matterport embed with "Take the guided tour" overlay; lazy-loaded | High-intent users land here; engagement metrics earn |
| Room grid (3 cards desktop, 1 mobile) | Each card: photo, name, starting rate, "View room" CTA | Decision-stage content after exploration |
| Booking widget (sticky) | Persistent bottom-of-viewport on mobile; sticky sidebar on desktop | Always available without dominating |
| Reviews + neighborhood + footer | Standard boutique homepage closers | Closes any remaining trust gaps |
This is the layout we now ship by default on new client deployments.
Mobile-Specific Findings
The mobile heatmap data was the most surprising. On every layout, mobile users:
- Scrolled 22–34% farther than desktop users on average
- Engaged with the tour for 1.4× longer when they did interact
- Bounced at the booking widget step 1.6× more often than desktop
The takeaway: mobile users are willing to scroll and explore, but the booking handoff is broken. The fix is a sticky booking widget plus the date picker reduction covered elsewhere in this series. The tour placement matters less than the mobile booking funnel quality once the user decides to book.
What This Means If You're on Cloudbeds, Mews, or a CMS
Implementation specifics:
- Cloudbeds Sites: the setup guide walks the responsive iframe wrapper. Add a custom HTML block as the second section after the hero.
- Mews Distributor: Pattern 1 from the Mews integration post — static thumbnail linking to a dedicated tour page — outperforms inline embeds on Distributor's landing page surface.
- WordPress / Webflow / Shopify: lift the responsive wrapper from the Cloudbeds post; works identically.
For all platforms, keep the tour off the above-the-fold position. The heatmap data is unambiguous on this point.
What We Didn't Test
A few caveats:
- Property type. All 40 properties were US/Caribbean boutiques. Resort and urban-business properties may behave differently (resort users tend to spend longer; business users tend to spend less).
- Autoplay sound. All tours were muted by default. We didn't test with audio narration, which Matterport now supports via the Mattertag system.
- Localization. All test properties served English-first homepages. Multilingual properties may need different placements in different markets.
What to Do Tomorrow
Three actions, in priority order:
- Move your tour out of the hero if it's autoplaying there.
- Add a "Explore in 3D" button overlay to the static hero so the path is visible without dominating.
- Lazy-load the tour embed so it doesn't slow first paint.
A 36-key boutique we ran this on in February 2026 went from 2.1% direct conversion to 2.6% — an +11% relative lift — in the first 30 days. At their ADR and occupancy, that's about $57K incremental annual direct revenue, before any of the parity rate fence work that stacks on top.
About 360VUES — Matterport 3D capture and virtual tour production. We instrument every client deployment with Hotjar or Clarity for the first 90 days; the heatmap data above is the result.