Skip to main content

​
Booking Confirmation

Display complete reservation details and confirmation number after successful payment. The final step of the booking journey.
✅ Step 3 of 3 | Component: <booking> | URL: /booking-confirmation

​
What Guests Receive

Confirmation Number

Unique booking reference and PIN code

Booking Details

Dates, room type, guest info, and total price

Hotel Information

Address, contact details, and check-in instructions

​
Basic Implementation

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

​
Complete Page Template

<!DOCTYPE html>
<html>
<head>
    <title>Booking Confirmed</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="booking"></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 to maintain focus on the booking confirmation details.

​
Page Requirements

RequirementValuePurpose
URL/booking-confirmationStandard booking flow URL
Meta robotsnoindex, nofollowPrevent search indexing
Auto-emailSent automaticallyBackup confirmation
Component<booking> onlyClear confirmation display

​
After Confirmation

  • Email Confirmation
  • Manage Booking
Guests automatically receive an email with:
  • Booking reference number
  • PIN code for modifications
  • Complete reservation details
  • Hotel contact information
🎉 Booking process complete! Guests can manage their reservation anytime using the Booking Query component.