> ## Documentation Index
> Fetch the complete documentation index at: https://directdoc.hotellinkage.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Booking confirmation

# Booking Confirmation

Display complete reservation details and confirmation number after successful payment. The final step of the booking journey.

<Note>
  ✅ **Step 3 of 3** | **Component:** `<booking>` | **URL:** `/booking-confirmation`
</Note>

## What Guests Receive

<CardGroup cols={3}>
  <Card title="Confirmation Number" icon="hashtag" color="#10b981">
    Unique booking reference and PIN code
  </Card>

  <Card title="Booking Details" icon="envelope" color="#0ea5e9">
    Dates, room type, guest info, and total price
  </Card>

  <Card title="Hotel Information" icon="building" color="#8b5cf6">
    Address, contact details, and check-in instructions
  </Card>
</CardGroup>

## Basic Implementation

```html theme={null}
<div data-mirai-component="booking"></div>
```

## Complete Page Template

<Accordion title="View full HTML template">
  ```html theme={null}
  <!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>
  ```
</Accordion>

<Warning>
  ⚠️ **Important:** Use this component on a dedicated page without additional content to maintain focus on the booking confirmation details.
</Warning>

## Page Requirements

| Requirement | Value                   | Purpose                    |
| ----------- | ----------------------- | -------------------------- |
| URL         | `/booking-confirmation` | Standard booking flow URL  |
| Meta robots | `noindex, nofollow`     | Prevent search indexing    |
| Auto-email  | Sent automatically      | Backup confirmation        |
| Component   | `<booking>` only        | Clear confirmation display |

## After Confirmation

<Tabs>
  <Tab title="Email Confirmation">
    Guests automatically receive an email with:

    * Booking reference number
    * PIN code for modifications
    * Complete reservation details
    * Hotel contact information
  </Tab>

  <Tab title="Manage Booking">
    Guests can later access their booking using:

    * [Booking Query](/components/booking-query) component
    * Booking ID + PIN from confirmation
    * Modify or cancel options (if allowed)
  </Tab>
</Tabs>

***

<Info>
  🎉 **Booking process complete!** Guests can manage their reservation anytime using the [Booking Query](/components/booking-query) component.
</Info>
