​
Loyalty

Authentication, registration, and profile management components for your loyalty program.
👥 Component types: Authentication, registration, profile management | Benefits: Exclusive rates, special promotions, member advantages

​
Components Overview

Session

Login/logout interface with member dropdown menu

Signup

Registration form for new loyalty members

Profile

Member dashboard with info and reservations

​
Session Component

The <session> component handles user authentication with dynamic behavior:
Displays a login button that opens a modal with:
  • Login form
  • Password recovery option
  • Link to registration page

​
Basic Implementation

<div data-mirai-component="session"></div>

​
Customization with Ghosting

Customize the component appearance using the ghosting system:
Available variables for authenticated state:
  • [firstName] - User’s first name
  • [lastName] - User’s last name
  • [email] - User’s email address

​
Signup Component

The <signup> component provides the registration form for new loyalty members.

​
Implementation

<div data-mirai-component="signup"></div>

​
Registration Process

1

User fills form

Complete registration on /create-account page
2

Email verification

Activation link sent to user’s email
3

Account activation

User clicks link and returns to homepage
4

First login

<session> component on homepage enables authentication
The homepage must include <session> component to handle account activation and subsequent login.

​
Profile Component

The <profile> component provides authenticated users with a complete dashboard:

Personal Information

  • Edit personal details
  • Change password
  • Delete account

My Reservations

  • View past bookings
  • Check upcoming stays
  • Access booking details

​
Implementation

<div data-mirai-component="profile"></div>

​
Required Pages

​
Complete Integration Example

💬 Need help setting up your loyalty program? Contact us at support@hotellinkage.com