Home > Blog > Website Conversion

The 'Book Now' Button on Your Riad's Website: Where to Place It, How to Design It, and How to Measure If It Converts

By Urunk UX Design Lab | October 5, 2026 | 8 min read

Where should you position the Book Now button on your riad website? Mobile UX guidelines, sticky bottom bars, micro-interactions, and tracking methods.

For riad and boutique hotel owners receiving significant mobile traffic looking to capture direct bookings.

UX Summary & Mobile Guest Behavior

When a traveler lands on your riad's website from Booking.com, Instagram, or TripAdvisor, they are not looking to read an essay. They seek three immediate answers: is there availability for my dates, what is the direct rate, and can I reserve effortlessly. If finding any of these answers takes more than a few seconds, they bounce back to an OTA. This guide details how to make your reservation call-to-action impossible to miss on mobile screens and how to rigorously verify that it converts.

Field Case Observation: 7-suite boutique riad (Fes Medina). Mobile traffic share: 74%. Initial setup: single "Book" button in the header, disappearing completely as visitors scrolled through room galleries. Changes implemented: high-contrast sticky bottom bar on mobile viewports + dedicated reservation button below each suite with date parameters preserved. Measured 60-day outcome: booking engine entries multiplied by 2.4x and direct mobile reservations increased by +38%.

1. The Problem Isn't Just the Button, It's the Entire Funnel

Most hotel websites have a "Book Now" button somewhere. The breakdown occurs in what happens immediately after the click: a room page that fails to display live real-time availability, an unwieldy date picker on mobile, or an exhausting multi-page form demanding excessive guest data upfront.

On mobile devices, visitors scroll rapidly through photography of your courtyard, plunge pool, and suites. The header CTA vanishes within seconds. Forcing users to scroll back to the top or open a hamburger menu introduces fatal friction. The action button must be accessible at every critical decision moment.

2. Three Locations, Three Strategic Functions

A single button is rarely sufficient. In high-performance hotel web architecture, each placement serves a distinct psychological stage:

Location Strategic Purpose Optimal Scenario Common Vulnerability
Desktop Header (Top-Right) Immediate visual anchor & brand clarity Returning guests who know exactly what they want Disappears entirely on mobile vertical scroll
Mobile Sticky Bottom Bar Constant thumb-friendly access at any scroll depth Exploring guests browsing suites and courtyard photography Obstructs content if improperly sized (> 60px height)
Below Each Room / Suite Card Immediate conversion at peak emotional desire Guests admiring a specific suite who want to confirm dates Missing on select rooms or redirects to an empty generic form
💡 EXPERT TIP

If your booking engine cannot automatically pass the selected room type from the suite card, conversion rates drop dramatically. A guest who selects the "Royal Suite" should land in the booking engine with that room pre-selected, rather than having to search the full inventory again.

3. Designing a Button That Commands Attention Without Shouting

Visual contrast matters, but visual hierarchy matters even more. Reserving a single distinctive accent color exclusively for conversion buttons establishes instant cognitive recognition across your entire site.

Traditional Mistake High-Converting Practice
Multiple conflicting button colors ("Learn More", "Contact", "Gallery", "Book") One exclusive accent color reserved strictly for reservation actions
Vague copy: "Submit", "Send Inquiry", "Click Here" Action-oriented clarity: "Check Live Rates", "Book Direct & Save"
Unsubstantiated claims: "Best Hospitality in Morocco" Tangible guarantees: "Instant Confirmation", "Free Airport Transfer 3+ Nts"
Button buried below heavy unoptimized image galleries Visible above the fold and reinforced with a sticky mobile bar

4. Five Technical Factors That Kill the Click After It Happens

  • Engine Load Speed: Benchmark booking widget opening speed over live 4G mobile networks (< 2.0s).
  • Touch-Optimized Calendar: Ensure smooth finger tapping without accidental zoom glitches or truncated date views.
  • Price Transparency: Display total pricing (room nights, Moroccan tourist taxes, breakfast inclusions) before requesting payment details.
  • Secure Payment Gateways: Support international 3D-Secure Visa/Mastercard processing.
  • Instant Multi-Channel Confirmation: Dispatch an email and automated WhatsApp summary within 30 seconds of booking.

5. Tracking and Verifying Conversion Performance

Configure three mandatory custom events in Google Analytics 4 (GA4):

  1. CTA Click (click_book_now): Record button location (header, mobile sticky, room card).
  2. Engine View (view_booking_engine): Track how many clickers actually reach the rate selection step.
  3. Direct Reservation (purchase): Measure real revenue and booking conversion rates per device type.

Frequently Asked Questions

Does a sticky bottom bar block content on smaller smartphones?

Only if improperly coded. Restrict bar height to a maximum of 56px–60px, ensure proper bottom page padding (padding-bottom: 80px) so footer links remain fully accessible, and test across both compact iPhone SE and large Android screens.

Should room rates appear directly on the button?

Displaying "From 1,100 MAD/night" directly above or beside the CTA qualifies user intent. However, ensure dynamic accuracy: rate discrepancies between the page and the booking engine immediately erode guest trust.

Key Metrics & Benchmarks

A performance comparison between industry average hospitality channels dependent on third-party OTAs versus optimized Urunk client channels: