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>

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

Installation Steps

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'" />

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

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>

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:

URL parameter: ?lang=en
HTML tag: <html lang="en">
Configuration: data-locale="en-US"
Browser default

Common Issues

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.

Console errors about missing property ID

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>

Styles not loading

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

Getting Started

Components

Booking Process

AI Integration

GTM Integration

Installation

Installation

Quick Start

Installation Steps

Configuration Options

Required Configuration

data-mirai-id

Optional Configuration

data-type

data-hotel

data-currency

data-locale

Language Priority

Common Issues

What’s Next?

Add Search Bar

Create Booking Pages

Customize Design

Test Booking Flow

​Installation

​Quick Start

​Installation Steps

​Configuration Options

​Required Configuration

data-mirai-id

​Optional Configuration

data-type

data-hotel

data-currency

data-locale

​Language Priority

​Common Issues

​What’s Next?

Add Search Bar

Create Booking Pages

Customize Design

Test Booking Flow

Installation

Quick Start

Installation Steps

Configuration Options

Required Configuration

Optional Configuration

Language Priority

Common Issues

What’s Next?