Unlock Lab Help

Overview

Unlock Lab is an integrated dashboard for testing, developing, and distributing check-in functionality. Anyone with facility owner access can use it to easily obtain URLs and code snippets for embedding on their website.

Key Features

  • Select Check-in Configuration - Choose existing check-in settings to test
  • Mobile Preview - Experience the check-in flow on a simulated smartphone screen
  • Generate URLs & Snippets - Obtain URLs and code for embedding on your website
  • Debug Features - View system logs and test API calls

Generate URLs & Snippets for Your Website (Most Important)

Overview

The most important feature of Unlock Lab is generating check-in URLs and host app snippets. These enable your customers to check in directly from your website or app.

Prerequisites

Before generating URLs or snippets:

  1. Create Check-in Configuration - You must have created a configuration on the "Check-in Configuration" page
  2. Verify Facility ID - Ensure the correct facility is selected

Create Check-in URL

Use Cases

  • Display as QR code at your facility
  • Add as a link on your website
  • Send via email or message to guests

Steps

  1. On the Unlock Lab page, select the target configuration from the "Select Check-in Configuration" dropdown
  2. In the "3. Generate URLs & Snippets for Your Website" section, click "Create Check-in URL"
  3. Copy the generated URL
  4. Share with customers or convert to QR code

URL Format

https://your-domain.com/checkin-host?
  facilityId=xxx&
  configId=yyy&
  theme=light&
  lang=en

Parameter Explanation:

  • facilityId: Facility ID
  • configId: Check-in configuration ID
  • theme: Theme (light/dark)
  • lang: Language (ja/en)
  • reservationId: (Optional) If reserved through accommodation plan

Create Host App Snippet

Use Cases

The host app snippet is a single HTML file that functions as a completely independent check-in application.

Main Use Cases:

  • Embed in site builders like Wix, Squarespace, WordPress
  • Embed as iframe on your website
  • Standalone check-in kiosk terminal
  • Display in WebView within custom apps

Steps

  1. On the Unlock Lab page, select the target configuration from the "Select Check-in Configuration" dropdown
  2. In the "3. Generate URLs & Snippets for Your Website" section, click "Create Host App Snippet"
  3. A modal opens displaying the complete HTML code
  4. Choose one of the following actions:
    • Copy: Copy to clipboard for pasting
    • Download: Download as HTML file (unlockos-checkin-host-{configId}.html)

Snippet Features

  • Completely Self-contained - Works without external dependencies (includes React, i18n, everything)
  • Unified Design System - Uses official UnlockOS design tokens
  • Responsive - Compatible with mobile, tablet, and desktop
  • Magic Link Authentication - Secure check-in via email authentication
  • Dark Mode Support - Theme switching based on configuration

Sample Code Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>UnlockOS Check-in Host App</title>
    <!-- Design tokens, styles -->
</head>
<body>
    <div id="unlock-checkin"></div>
    <link rel="stylesheet" href="https://cdn.unlockos.com/v1/dist-snippet/unlock-snippet-sdk.css">
    <script src="https://cdn.unlockos.com/v1/dist-snippet/unlock-snippet-sdk.umd.js"></script>
    <script>
      UnlockSDK.init({
        facilityId: 'your-facility-id',
        configId: 'your-config-id',
        theme: 'light',
        lang: 'en',
        supabaseUrl: 'https://your-project.supabase.co',
        token: 'your-anon-key'
      });
    </script>
</body>
</html>

Test Check-in

Overview

You can preview the actual check-in experience on the mobile preview screen. This allows you to verify functionality without affecting the production environment.

How to Use

  1. Select Check-in Configuration - Choose configuration from the dropdown at the top
  2. View Mobile Preview - iPhone-style preview screen is displayed
  3. Click "Start Check-in" Button - Try actual operations in the preview
  4. Review Results - Check check-in completion screen, entry key issuance, etc.

Test Reservation Feature (For Accommodation Plans)

If using accommodation plans:

  1. Click "Create Reservation" button
  2. Enter check-in and check-out dates
  3. Review pricing calculation results
  4. Generated URL includes reservationId parameter

View Occupancy Status

Unlock Lab displays real-time occupancy status.

  • Current Occupants - Number of guests currently in the facility
  • Maximum Capacity - Limit defined in check-in configuration
  • Utilization Rate - Displayed as percentage

This provides at-a-glance understanding of facility congestion.

Debug Features

Log Display

View system logs to help diagnose issues.

API Call Testing

Test requests to API endpoints.

FAQ

Q: Will tests in Unlock Lab affect the production environment?

A: Test check-ins performed in the Unlock Lab mobile preview are recorded in the production database. However, they can be clearly identified as tests and deleted later. If you want to avoid affecting the production environment, we recommend creating a dedicated test facility.

Q: Do generated URLs or snippets have an expiration date?

A: URLs and snippets themselves have no expiration date. However, if you delete or disable the check-in configuration, check-ins from that URL will no longer work.

Q: Is the snippet secure?

A: The snippet only contains your Supabase anon key (public key), and Row Level Security (RLS) prevents unauthorized data access. However, since it contains your production anon key, be sure to test before making it public.

Q: Can I customize the host app snippet?

A: You can edit the downloaded HTML file to customize the design and text. However, do not modify the SDK initialization parameters (UnlockSDK.init).

Q: Who can use Unlock Lab?

A: Anyone with facility administrator access can use Unlock Lab. Developer permissions are not required.

Q: How do I create QR codes?

A: Paste the generated check-in URL into a QR code generation service (e.g., QR Code Generator, Google Chart API) to create QR codes. Many services are available for free.