Variables

Customize your booking engine colors and styling with CSS variables. For most cases, you only need to define one color variable and everything else is generated automatically.

⚡ Quick setup: Define --corporative-color and you’re done. All other colors adapt automatically.

Quick Start

Create CSS file

Create linkage-variables.css with your brand color

Include before script

Add the CSS file before the Linkage Direct script

Basic Example

/* linkage-variables.css */
:root {   
  --corporative-color: #BF993F; /* Your brand's primary color */
}

<!-- Include in your HTML -->
<link rel="stylesheet" href="path/to/linkage-variables.css" type="text/css" />

Main Variables

Corporate Color

--corporative-color

Type: Color hex value | Default: #2574A9The core customization variable. Set this and the entire color palette adapts automatically.

When you set --corporative-color, these colors are automatically generated:

Generated Variable	Purpose	Example
`--mirai-ui-accent`	Accent color (same as corporate)	`#2574A9`
`--mirai-ui-accent-dark`	Darker shade for hover states	`#174868`
`--mirai-ui-accent-light`	Lighter shade for backgrounds	`#669EC3`
`--mirai-ui-accent-border`	Border color variations	`#A8C7DD`
`--mirai-ui-accent-background`	Background tint variations	`#EDF3F8`

If you define --corporative-color, the generated palette values cannot be modified individually. This ensures visual consistency and accessibility.

Component Styling

Buttons
Finder Component
Session Component

Primary Buttons

Variable	Purpose	Default
`--mirai-ui-button-background`	Button background	`#2574A9`
`--mirai-ui-button-background-active`	Background on hover	`#174868`
`--mirai-ui-button-color`	Button text color	`#FFFFFF`
`--mirai-ui-button-color-active`	Text color on hover	`#FFFFFF`

Secondary Buttons

Variable	Purpose	Default
`--mirai-ui-button-secondary-background-active`	Background on hover/active	`#EDF3F8`
`--mirai-ui-button-secondary-color`	Button text color	`#2574A9`
`--mirai-ui-button-secondary-color-active`	Text color on hover/active	`#174868`

General Form

Variable	Purpose	Default
`--mirai-finder-background`	Form background color	`#FFFFFF`
`--mirai-finder-border`	Form border color	`#DDDDDD`
`--mirai-finder-border-radius`	Form border radius	`4px`
`--mirai-finder-padding`	Form padding	`8px`
`--mirai-finder-gap`	Spacing between fields	`8px`

Finder Button

Variable	Purpose	Default
`--mirai-finder-button-background`	Button background color	`#2574A9`
`--mirai-finder-button-background-active`	Background on hover/active	`#174868`
`--mirai-finder-button-color`	Button text color	`#FFFFFF`
`--mirai-finder-button-color-active`	Text color on hover/active	`#FFFFFF`
`--mirai-finder-button-border-radius`	Button border radius	`4px`
`--mirai-finder-button-font-family`	Button font family	`"Arial", sans-serif`
`--mirai-finder-button-font-weight`	Button font weight	`500`
`--mirai-finder-button-font-size`	Button font size	`14px`

Finder Fields

Variable	Purpose	Default
`--mirai-finder-field-height`	Height of form fields	`52px`
`--mirai-finder-field-border-color`	Field border color	`#DDDDDD`
`--mirai-finder-field-border-style`	Border type	`solid`
`--mirai-finder-field-border-width`	Border width	`0px`
`--mirai-finder-field-border-radius`	Field border radius	`4px`
`--mirai-finder-field-border-active`	Border color when focused	`#174868`
`--mirai-finder-field-separator-color`	Separator color	`#DDDDDD`
`--mirai-finder-field-icon-color`	Icon color in fields	`#333333`

Variable	Purpose	Default
`--mirai-session-color`	Text and icon color (unauthenticated)	`#333333`
`--mirai-session-icon-color`	Icon-specific color	`#333333`
`--mirai-session-color-active`	Color on hover/active	`#333333`
`--mirai-session-icon-color-active`	Icon color on hover/active	`#333333`

Complete Example

View full CSS template

/* linkage-variables.css */
:root {
  /* Primary Brand Color */
  --corporative-color: #BF993F;
  
  /* Primary Button Customization */
  --mirai-ui-button-background: #BF993F;
  --mirai-ui-button-background-active: #174868;
  --mirai-ui-button-color: #FFFFFF;
  --mirai-ui-button-color-active: #FFFFFF;
  
  /* Secondary Button Customization */
  --mirai-ui-button-secondary-color: #BF993F;
  --mirai-ui-button-secondary-color-active: #174868;
  --mirai-ui-button-secondary-background-active: #EDF3F8;
  
  /* Finder Component */
  --mirai-finder-background: #FFFFFF;
  --mirai-finder-border: #DDDDDD;
  --mirai-finder-border-radius: 4px;
  --mirai-finder-padding: 8px;
  --mirai-finder-gap: 8px;
  
  /* Finder Button */
  --mirai-finder-button-background: #BF993F;
  --mirai-finder-button-background-active: #174868;
  --mirai-finder-button-color: #FFFFFF;
  --mirai-finder-button-color-active: #FFFFFF;
  --mirai-finder-button-border-radius: 4px;
  --mirai-finder-button-font-family: "Arial", sans-serif;
  --mirai-finder-button-font-weight: 500;
  --mirai-finder-button-font-size: 14px;
  
  /* Finder Fields */
  --mirai-finder-field-height: 52px;
  --mirai-finder-field-border-color: #DDDDDD;
  --mirai-finder-field-border-style: solid;
  --mirai-finder-field-border-width: 0px;
  --mirai-finder-field-border-radius: 4px;
  --mirai-finder-field-border-active: #BF993F;
  --mirai-finder-field-separator-color: #DDDDDD;
  --mirai-finder-field-icon-color: #333333;
  
  /* Session Component */
  --mirai-session-color: #333333;
  --mirai-session-icon-color: #BF993F;
  --mirai-session-color-active: #BF993F;
  --mirai-session-icon-color-active: #174868;
  
  /* General UI */
  --mirai-ui-border-radius: 4px;
  --mirai-ui-modal-layer: 10000;
}

Additional Variables

Variable	Purpose	Default
`--mirai-ui-border-radius`	Border radius for UI elements	`4px`
`--mirai-ui-modal-layer`	Z-index for modal windows	`10000`

💬 Need help with styling? Contact us at support@hotellinkage.com

Getting Started

Components

Booking Process

AI Integration

GTM Integration

Variables

Variables

Quick Start

Basic Example

Main Variables

Corporate Color

--corporative-color

Component Styling

Primary Buttons

Secondary Buttons

General Form

Finder Button

Finder Fields

Complete Example

Additional Variables

​Variables

​Quick Start

​Basic Example

​Main Variables

​Corporate Color

--corporative-color

​Component Styling

​Primary Buttons

​Secondary Buttons

​General Form

​Finder Button

​Finder Fields

​Complete Example

​Additional Variables

Variables

Quick Start

Basic Example

Main Variables

Corporate Color

Component Styling

Primary Buttons

Secondary Buttons

General Form

Finder Button

Finder Fields

Complete Example

Additional Variables