Skip to main content

​
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

<!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

RequirementValuePurpose
URL/booking-roomsStandard booking flow URL
Meta robotsnoindex, nofollowPrevent search indexing
Viewportwidth=device-widthMobile responsiveness
Component<rates> onlyClean, focused experience
Next Step → Proceed to Checkout