Skip to main content

​
Installation

Get your booking engine running in under 10 minutes. Just add 2 files to your website and configure your hotel ID.
⚡ What you need: Your Hotel Linkage property ID | Time required: ~5 minutes

​
Quick Start

  • Hotel Setup
  • Chain Setup
<!-- 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>

​
Installation Steps

1

Add CSS to Header

Copy and paste the stylesheet link into your <head> section
<link rel="preload" as="style" 
      href="https://static.mirai.com/core/index.css"
      onload="this.onload=null;this.rel='stylesheet'" />
2

Configure Your Property

Add your hotel configuration in the <body>
<div data-mirai-id="XXXXXXX" 
     data-currency="USD" 
     data-locale="en-US"></div>
Replace XXXXXXX with your actual Hotel Linkage property ID
3

Add JavaScript

Place the script at the end of your <body> tag
<script type="module" defer 
        src="https://static.mirai.com/core/index.js" 
        data-cookieconsent="necessary"></script>
4

Test Your Installation

Save your changes and refresh your page. Check browser console (F12) for any error messages.
If you see errors, contact support@hotellinkage.com

​
Configuration Options

​
Required Configuration

data-mirai-id

Type: string (required)
Your unique hotel or chain identifier
If you don’t have your mirai-id, contact support@hotellinkage.com

​
Optional Configuration

data-type

Type: string Default: "hotel"Set to "chain" for multi-property setups

data-hotel

Type: stringSpecific hotel ID when using chain mode

data-currency

Type: string Default: Hotel’s defaultISO 4217 code: EUR, USD, GBP, etc.

data-locale

Type: string Default: Browser languageFormat: language-COUNTRY (e.g., en-US, es-ES)

​
Language Priority

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

​
Common Issues

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.
Solution: Ensure your configuration div is placed BEFORE the JavaScript file:
<!-- ✅ Correct order -->
<div data-mirai-id="XXXXXXX"></div>
<script src="..."></script>

<!-- ❌ Wrong order -->
<script src="..."></script>
<div data-mirai-id="XXXXXXX"></div>
Solution: The preload technique requires JavaScript. For no-JS fallback:
<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>

​
What’s Next?

Add Search Bar

Add the booking search widget to your homepage

Create Booking Pages

Set up the 5 required booking flow pages

Customize Design

Match your hotel’s brand with CSS variables

Test Booking Flow

Walk through a complete test reservation
💡 Pro tip: Use your browser’s Network tab (F12) to verify both files are loading with status 200
💬 Need help? Contact support at support@hotellinkage.com
⌘I