Guest GuideDocs

Guest Experience

This section describes what guests see when they open a guide link. Guests never need to create an account or log in — everything works through the shared link.

Opening a Guide

When a guest opens a guide link (e.g. guestguide.cc/g/abc12345), the page loads with the full guide rendered as a single, scrollable page. The experience is optimized for mobile but works on any screen size.

If the link is a time-limited share session, the system checks whether the session is currently active, not yet started, or expired. This determines whether sensitive content is visible or masked.

Guide Sections

The guest sees the following sections from top to bottom:

Status Banner

If the share session is not active, a banner appears at the very top:

  • Not started: "Link not active yet — you will be able to see codes and passwords [date]" with a clock icon
  • Expired: "Link expired — you will no longer be able to see codes and passwords after [date]" with a calendar icon

No banner is shown when the session is active.

Hero Card

A white card with rounded corners containing:

  • Cover image at the top (if the host uploaded one)
  • Property title and subtitle
  • Check-in and check-out times displayed in a compact badge (e.g. "Check-in 3:00 PM | Check-out 11:00 AM")
  • Address with a map pin icon
  • Get Directions link — opens Google Maps with the property address

A globe icon in the top right corner opens the language selector.

Arrival Instructions

A white card with a key icon and the section title (e.g. "Let's get you inside"). Contains numbered steps connected by a vertical timeline:

  • Each step shows a title and description
  • Door codes appear inline in the description text
  • When the session is not active, door codes are replaced with ••••••••

I'm In! Button

At the bottom of the arrival instructions card, a full-width button labeled "I'm In!" with a thumbs-up icon. When clicked:

  1. An email is sent to the host notifying them the guest has arrived
  2. A toast message appears: "Your host has been notified"
  3. The button becomes disabled so it can only be used once per session

If the guest has already clicked it (or returns later), the button is disabled and shows the toast "We already notified the host".

This button only appears when viewing via a share session link.

WiFi Card

A dark card (dark gray background) showing:

  • WiFi icon with an "Online" label
  • Section title and description (e.g. "Get Connected" / "High-speed internet for your stay.")
  • A glassmorphic card with two fields:
    • Network — the WiFi SSID
    • Password — shown in amber monospace font, clickable to copy to clipboard

When the session is not active, both network name and password are replaced with •••••••• and the copy button is hidden.

Amenities Grid

A responsive grid of clickable cards — two columns on desktop, single column on mobile.

Each amenity card shows:

  • The amenity image as a background (if uploaded) with a dark overlay
  • The amenity icon and title at the bottom
  • Cards without images show a white background with the icon and title

Clicking a card opens the amenity detail page.

Amenity Detail Page

Each amenity has its own dedicated page (e.g. guestguide.cc/a/xyz12345) with:

A fixed bar at the top with a Back button (returns to the guide) and a globe icon for language selection.

Hero Image

A large hero section (55% of viewport height) with the amenity image, a gradient overlay, the amenity icon in a rounded badge, and the amenity title in large text.

How to Use

A white card with a book icon and the heading "How to Use". Displays the host's instructions split into paragraphs. If no instructions were added, a fallback message appears: "No usage instructions have been added yet. Check back with your host for details."

Video Tutorial

If the host added a video URL:

  • YouTube links are embedded as an inline video player
  • Other video links show a clickable card with a play button overlay and the text "Watch how to use [amenity name]"

Care Instructions

A section with a sparkles icon and the heading "Care Instructions" showing three standard tips:

  1. "Please follow the usage instructions to avoid damage."
  2. "If something isn't working as expected, check that it's properly connected or powered on."
  3. "Reach out to your host if you need any assistance."

Language Support

Guests can change the language of the entire guide by clicking the globe icon available on both the guide view and amenity detail pages. The language selector modal shows 15 supported languages:

English, Spanish, French, German, Italian, Portuguese, Chinese (Simplified), Japanese, Korean, Dutch, Russian, Arabic, Hindi, Polish, and Turkish.

When a language is selected:

  • The preference is saved in a cookie for future visits (1 year)
  • The page reloads with all content translated server-side
  • Property content (titles, descriptions, instructions) and UI labels (buttons, headings) are both translated
  • Door code values and placeholders are preserved without translation

The system also auto-detects the guest's browser language on first visit and translates if it matches a supported language.

Mobile Experience

The guide is designed mobile-first:

  • All sections stack vertically in a single scrollable column
  • The amenity grid switches from two columns to one column
  • Touch targets (buttons, cards) are sized for finger tapping
  • Images adapt to smaller screens with appropriate heights
  • The WiFi card stacks its fields vertically on mobile
Managing Links & CodesMultiple Properties