> ## 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.

# Installation

# Installation

Get your booking engine running in under 10 minutes. Just add 2 files to your website and configure your hotel ID.

<Note>
  ⚡ **What you need:** Your Hotel Linkage property ID | **Time required:** \~5 minutes
</Note>

## Quick Start

<Tabs>
  <Tab title="Hotel Setup">
    ```html theme={null}
    <!-- Complete example for a single hotel -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <!-- Step 1: Add CSS -->
      <link rel="preload" as="style" 
            href="https://static.mirai.com/core/index.css"
            onload="this.onload=null;this.rel='stylesheet'" />
    </head>
    <body>
      <!-- Step 2: Add Hotel Configuration -->
      <div data-mirai-id="YOUR_HOTEL_ID" 
           data-currency="USD" 
           data-locale="en-US"></div>
      
      <!-- Step 3: Add JavaScript -->
      <script type="module" defer 
              src="https://static.mirai.com/core/index.js" 
              data-cookieconsent="necessary"></script>
    </body>
    </html>
    ```
  </Tab>

  <Tab title="Chain Setup">
    ```html theme={null}
    <!-- Complete example for a hotel chain -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <!-- Step 1: Add CSS -->
      <link rel="preload" as="style" 
            href="https://static.mirai.com/core/index.css"
            onload="this.onload=null;this.rel='stylesheet'" />
    </head>
    <body>
      <!-- Step 2: Add Chain Configuration -->
      <div data-mirai-id="YOUR_CHAIN_ID" 
           data-type="chain"
           data-hotel="SPECIFIC_HOTEL_ID"
           data-currency="EUR" 
           data-locale="es-ES"></div>
      
      <!-- Step 3: Add JavaScript -->
      <script type="module" defer 
              src="https://static.mirai.com/core/index.js" 
              data-cookieconsent="necessary"></script>
    </body>
    </html>
    ```
  </Tab>
</Tabs>

## Installation Steps

<Steps>
  <Step title="Add CSS to Header">
    Copy and paste the stylesheet link into your `<head>` section

    ```html theme={null}
    <link rel="preload" as="style" 
          href="https://static.mirai.com/core/index.css"
          onload="this.onload=null;this.rel='stylesheet'" />
    ```
  </Step>

  <Step title="Configure Your Property">
    Add your hotel configuration in the `<body>`

    ```html theme={null}
    <div data-mirai-id="XXXXXXX" 
         data-currency="USD" 
         data-locale="en-US"></div>
    ```

    <Warning>
      Replace `XXXXXXX` with your actual Hotel Linkage property ID
    </Warning>
  </Step>

  <Step title="Add JavaScript">
    Place the script at the end of your `<body>` tag

    ```html theme={null}
    <script type="module" defer 
            src="https://static.mirai.com/core/index.js" 
            data-cookieconsent="necessary"></script>
    ```
  </Step>

  <Step title="Test Your Installation">
    Save your changes and refresh your page. Check browser console (F12) for any error messages.

    <Info>
      If you see errors, contact [support@hotellinkage.com](mailto:support@hotellinkage.com)
    </Info>
  </Step>
</Steps>

## Configuration Options

### Required Configuration

<Card title="data-mirai-id" icon="key" color="#ef4444">
  **Type:** `string` *(required)*\
  Your unique hotel or chain identifier

  <Info>
    If you don't have your mirai-id, contact [support@hotellinkage.com](mailto:support@hotellinkage.com)
  </Info>
</Card>

### Optional Configuration

<CardGroup cols={2}>
  <Card title="data-type" icon="inbox">
    **Type:** `string` **Default:** `"hotel"`

    Set to `"chain"` for multi-property setups
  </Card>

  <Card title="data-hotel" icon="building">
    **Type:** `string`

    Specific hotel ID when using chain mode
  </Card>

  <Card title="data-currency" icon="dollar-sign">
    **Type:** `string` **Default:** Hotel's default

    ISO 4217 code: `EUR`, `USD`, `GBP`, etc.
  </Card>

  <Card title="data-locale" icon="globe">
    **Type:** `string` **Default:** Browser language

    Format: `language-COUNTRY` (e.g., `en-US`, `es-ES`)
  </Card>
</CardGroup>

### Language Priority

<Note>
  Language selection follows this priority order:

  1. URL parameter: `?lang=en`
  2. HTML tag: `<html lang="en">`
  3. Configuration: `data-locale="en-US"`
  4. Browser default
</Note>

## Common Issues

<Accordion title="Components not showing up">
  **Solution:** Check that your `data-mirai-id` is correct and that you've added the specific component HTML to your page. Refer to the Components section for the required markup.
</Accordion>

<Accordion title="Console errors about missing property ID">
  **Solution:** Ensure your configuration div is placed BEFORE the JavaScript file:

  ```html theme={null}
  <!-- ✅ Correct order -->
  <div data-mirai-id="XXXXXXX"></div>
  <script src="..."></script>

  <!-- ❌ Wrong order -->
  <script src="..."></script>
  <div data-mirai-id="XXXXXXX"></div>
  ```
</Accordion>

<Accordion title="Styles not loading">
  **Solution:** The preload technique requires JavaScript. For no-JS fallback:

  ```html theme={null}
  <link rel="preload" as="style" 
        href="https://static.mirai.com/core/index.css"
        onload="this.onload=null;this.rel='stylesheet'" />
  <noscript>
    <link rel="stylesheet" 
          href="https://static.mirai.com/core/index.css" />
  </noscript>
  ```
</Accordion>

## What's Next?

<CardGroup cols={2}>
  <Card title="Add Search Bar" icon="magnifying-glass" href="/components/finder">
    Add the booking search widget to your homepage
  </Card>

  <Card title="Create Booking Pages" icon="file-plus" href="/booking-process/introduction">
    Set up the 5 required booking flow pages
  </Card>

  <Card title="Customize Design" icon="palette" href="/variables">
    Match your hotel's brand with CSS variables
  </Card>

  <Card title="Test Booking Flow" icon="route" href="/booking-process/booking-rooms">
    Walk through a complete test reservation
  </Card>
</CardGroup>

***

<Info>
  💡 **Pro tip:** Use your browser's Network tab (F12) to verify both files are loading with status 200
</Info>

<Info>
  💬 **Need help?** Contact support at [support@hotellinkage.com](mailto:support@hotellinkage.com)
</Info>
