Room Selection

Display available rooms and rates for guests to choose from. This is the first step where booking decisions are made.

🏨 Step 1 of 3 | Component: <rates> | URL: /booking-rooms

What Guests See

Room Gallery

Photos and virtual tours of each room type

Rates & Availability

Real-time pricing with available dates

Amenities

Features, services, and room details

Basic Implementation

<div data-mirai-component="rates"></div>

Complete Page Template

View full HTML template

<!DOCTYPE html>
<html>
<head>
    <title>Select Your Room</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="noindex, nofollow" />
    <link rel="stylesheet" href="https://static.mirai.com/core/index.css" type="text/css" media="all" />
</head>
<body>
    <div data-mirai-id="YOUR_HOTEL_ID"></div>
    <div data-mirai-component="rates"></div>
    <script type="module" defer src="https://static.mirai.com/core/index.js" 
            data-cookieconsent="necessary"></script>
</body>
</html>

⚠️ Important: Use this component on a dedicated page without additional content. Adding headers, footers, or other elements may affect functionality.

Page Requirements

Requirement	Value	Purpose
URL	`/booking-rooms`	Standard booking flow URL
Meta robots	`noindex, nofollow`	Prevent search indexing
Viewport	`width=device-width`	Mobile responsiveness
Component	`<rates>` only	Clean, focused experience

Next Step → Proceed to Checkout

Getting Started

Components

Booking Process

AI Integration

GTM Integration

Booking rooms

Room Selection

What Guests See

Room Gallery

Rates & Availability

Amenities

Basic Implementation

Complete Page Template

Page Requirements

​Room Selection

​What Guests See

Room Gallery

Rates & Availability

Amenities

​Basic Implementation

​Complete Page Template

​Page Requirements

Room Selection

What Guests See

Basic Implementation

Complete Page Template

Page Requirements