Embeddable Client Components

Description

Our SDK provides you with embeddable UI components to help build your integration with Autohost. For all Verification Components, we embed a Preact micro-app in your own app. For some Admin Components, we mount an iframe.

Here is a quick introductory video on how to get started with our SDK.

Admin Components

These components are used to build out your own dashboard to access information about the reservation in Autohost. These display sensitive information, and require a short-lived secure access token.

Reservation Results
Sex Offenders

Verification Components

Verification Components are user-facing components, that allow you to embed some or all of the Autohost Guest Portal in your own application.

ID Verification

Usage

Create a new client instance. You can also indicate if you want to access the sandbox (develop) environment, or production.

const client = await AutohostSDK.init({
    sandbox: true, // defaults to true
    reservationId: RESERVATION_ID,
});

Use the client instance to mount a component. Provide a component name and an options object to the component method, and the ID of the DOM element the component will be mounted in.

client.component('COMPONENT_NAME', options).mount('#target');

<div id="target" />

Custom Styles

For all components except for Reservation Results, our UI is fully embedded in your app, and will inherit your CSS styles for all base html elements. You can further customize the appearance of our UI by targeting the classes of our elements. These are prefixed with ah-, such as ah-button, ah-select.

For the Reservation Results component (which renders in an iframe), you can customize styles by:

Passing a styles object in the options when mounting the component
Overriding CSS Custom Properties to change typography, colors, and spacing globally
Targeting BEM-style class names for specific element customization

See the Reservation Results section for a complete list of available CSS classes and custom properties.

info

Some of the class names that appear in our ui are generated by our build proccess, applying styles from our CSS modules. They are generated at build time, and may be unreliable. documentSelect-module_doctypeSelect__ZqHn2 is one example. We suggest not using targetting those classes. Use the semantic class names we have added that are prefixed with ah- instead.

Localization

In all of our Verification Components, we provide translations in the languages in the table below. We automatically detect the best language to use based on the user's browser settings. Alternatively, you can pass a locale property to the options object when you initialize the component.

Code	Language
'cs'	Czech
'de'	German
'en'	English
'es'	Spanish
'fr'	French
'he'	Hebrew
'it'	Italian
'ja'	Japanese
'pt'	Portuguese
'pt-BR	Portuguese (Brazil)

Admin Components

Reservation Results

Component Name

ReservationResults

Description

Displays the Autohost verification results for a reservation. This includes:

Basic reservation information
Verification status with approve/decline functionality
ID verification results
Top verifications
Concerns and recommendations
ID document images (if available)

Options

Name	Type	Description
reservationId	String	The Autohost ID of the reservation to display.
apiToken	String	The temporary API token. More info on how to generate it.
styles	Styles (object)	An object of custom CSS styles to apply to the elements on the page. The keys can be the class name of any element on the page. You can inspect the embedded component to see all class names available.

New Features

The component now includes manual verification controls that allow property managers to:

Approve or decline reservations
Add notes to the verification decision
Select specific reasons for declining a reservation
View the history of manual verification decisions

Available CSS Classes

The following CSS classes are available for styling. We use BEM (Block, Element, Modifier) naming conventions for consistency and easy targeting.

CSS Custom Properties (Variables)

You can override these CSS custom properties to customize typography across the entire component:

:root {
    /* Font Family */
    --dashboard-font-family: inherit;
    
    /* Font Sizes */
    --dashboard-font-size-xs: 0.75rem;      /* 12px - captions, metadata */
    --dashboard-font-size-sm: 0.875rem;     /* 14px - secondary text, labels */
    --dashboard-font-size-base: 1rem;       /* 16px - body text */
    --dashboard-font-size-md: 1.125rem;     /* 18px - emphasized body */
    --dashboard-font-size-lg: 1.25rem;      /* 20px - section titles */
    --dashboard-font-size-xl: 1.5rem;       /* 24px - card titles */
    --dashboard-font-size-2xl: 1.75rem;     /* 28px - large stats */
    --dashboard-font-size-3xl: 2rem;        /* 32px - hero stats */
    
    /* Font Weights */
    --dashboard-font-weight-normal: 400;
    --dashboard-font-weight-medium: 500;
    --dashboard-font-weight-semibold: 600;
    --dashboard-font-weight-bold: 700;
    
    /* Line Heights */
    --dashboard-line-height-tight: 1.25;
    --dashboard-line-height-normal: 1.5;
    --dashboard-line-height-relaxed: 1.75;
    
    /* Letter Spacing */
    --dashboard-letter-spacing-tight: -0.025em;
    --dashboard-letter-spacing-normal: 0;
    --dashboard-letter-spacing-wide: 0.025em;
    
    /* Text Colors */
    --dashboard-text-primary: #1a1a1a;
    --dashboard-text-secondary: #666666;
    --dashboard-text-muted: #999999;
    --dashboard-text-inverse: #ffffff;
    
    /* Status Colors */
    --dashboard-status-success: #2e7d32;
    --dashboard-status-warning: #ed6c02;
    --dashboard-status-error: #d32f2f;
    --dashboard-status-info: #0288d1;
    --dashboard-status-neutral: #757575;
}

Global Typography Classes

These classes are applied to text elements throughout the component and can be targeted for consistent styling:

dashboard__card-title - Card/accordion header titles
dashboard__section-title - Section titles within cards
dashboard__subsection-title - Subsection titles
dashboard__label - Labels in definition lists and forms
dashboard__value - Values in definition lists
dashboard__body - Body text content
dashboard__caption - Caption and metadata text
dashboard__stat-value - Large statistic numbers
dashboard__stat-label - Labels for statistics
dashboard__status--success - Success status text (green)
dashboard__status--warning - Warning status text (orange)
dashboard__status--error - Error status text (red)
dashboard__status--info - Info status text (blue)
dashboard__status--neutral - Neutral status text (gray)

Main Container

root - The main container of the component

Card Components

card - Base class for all cards/accordions
card_information - Information card
card_status - Verification status card
card_top-verifications - Top verifications card
card_top-concerns - Concerns card
card_top-recommendations - Recommendations card
card_report-download - Report download card
card_id-verification-document - ID verification document card
card_fraud-detection - Fraud detection card
card_global-watchlist - Global watchlist card
card_adverse-media - Adverse media card
card_error - Error message card

Headers

header - Base class for all headers
header_information - Information section header
header_status - Status section header
header_top-verifications - Top verifications header
header_top-concerns - Concerns section header
header_top-recommendations - Recommendations header
header_report-download - Report download header
header_id-verification-document - ID verification document header
header_fraud-detection - Fraud detection header
header_global-watchlist - Global watchlist header
header_adverse-media - Adverse media header
header_error - Error message header

Verification Status

verification-status-card - Container for verification status
verification-status-header - Header of verification status section
verification-status__title - Title text in header
verification-status__content - Main content area
verification-status__list - List container
verification-status__list-item - Individual status items
verification-status__item--supervised - Supervised decision item
verification-status__item--automatic - Automatic check item
verification-status__item--guest-portal - Guest portal status item
verification-status__item-label - Label text in items
verification-status__status-text - Status value text
verification-status__notes-text - Notes text
verification-status__reason-text - Reason text
verification-status__guest-portal-status - Guest portal status text
verification-status__last-step-text - Last step text
verification-status-info - Info icon button
verification-status-error - Error message
verification-status-actions - Action buttons container
verification-status-approve-btn - Approve button
verification-status-decline-btn - Decline button
verification-status-dialog - Status update dialog
verification-status-dialog__title - Dialog title
verification-status-dialog__content - Dialog content
verification-status-dialog__description - Dialog description text
verification-status-dialog__actions - Dialog action buttons
verification-status-dialog-error - Error message in dialog
verification-status-decline-reason - Decline reason selector
verification-status-decline-reason-helper - Helper text for decline reason
verification-status-notes - Notes input field
verification-status-cancel-btn - Cancel button in dialog
verification-status-submit-btn - Submit button in dialog

Definition Lists

definition-list - Container for definition list
definition-list__item - List item container
definition-list__item--alternate - Alternate row styling (even rows)
definition-list__item-[label] - Dynamic class based on label (camelCase)
definition-list__label - Label container
definition-list__label-text - Label text element
definition-list__value - Value container
definition-list__value-text - Value text element
definition-list__extra - Extra content container
definition-list__extra-text - Extra text element

Legacy classes (deprecated, use new BEM classes above):

definition-list_item - List item container
definition-list_item--text - Text content in list items
definition-list__item--label - Labels in definition lists
definition-list__item--value - Values in definition lists
definition-list__item--extra - Extra information in list items
definition-list_item--alternate - Alternate styling for list items

ID Check Section

id-check__title - Section title
id-check__content - Content container

ID Images

id-image_container - Container for ID images
id-image_container_{type} - Specific container for each image type
id-image - Base class for ID images
id-image_{type} - Specific class for each image type

Top Concerns

top-concerns__title - Section title
top-concerns__content - Content container
top-concerns__list - List container
top-concerns__item - Individual concern items
top-concerns__item--empty - Empty state item
top-concerns__text - Concern text
top-concerns__empty-text - Empty state text

Top Recommendations

top-recommendations__title - Section title
top-recommendations__content - Content container
top-recommendations__list - List container
top-recommendations__item - Individual recommendation items
top-recommendations__item--empty - Empty state item
top-recommendations__text - Recommendation text
top-recommendations__empty-text - Empty state text

Top Verifications

top-verifications__title - Section title
top-verifications__content - Content container

Report Download

report-download__title - Section title
report-download__content - Content container
report-download__description - Description text

Information Section

information__title - Section title
information__content - Content container

Fraud Detection

fraud-detection__title - Section title
fraud-detection__content - Content container
fraud-detection__list - Main list container
fraud-detection__list-item - List items
fraud-detection__item-label - Label text
fraud-detection__item-value - Value text
fraud-detection__status - Status text
fraud-detection__status-chip - Status chip in header
fraud-detection__location - Location text
fraud-detection__device - Device info text
fraud-detection__observations - Observations list
fraud-detection__subheader - Observations subheader
fraud-detection__observation-item - Individual observation
fraud-detection__observation-text - Observation text
fraud-detection__no-observations - Empty observations text
fraud-detection__geolocation - Geolocation section
fraud-detection__fingerprints - Fingerprints section
fraud-detection__section-title - Section titles within card
fraud-detection__stat-card - Stat card container
fraud-detection__stat-value - Stat value (large number)
fraud-detection__stat-label - Stat label text

Global Watchlist

global-watchlist__title - Section title
global-watchlist__match-chip - Match count chip in header
global-watchlist__content - Content container
global-watchlist__stat-card - Stats card
global-watchlist__stat-value - Stat value (match count)
global-watchlist__stat-label - Stat label
global-watchlist__info-icon - Info icon button
global-watchlist__section-title - "Watchlist Matches" title
global-watchlist__list - Results list
global-watchlist__list-item - Individual result item
global-watchlist__item-header - Item header with name
global-watchlist__item-name - Person name
global-watchlist__item-source - Source container
global-watchlist__item-source-text - Source text
global-watchlist__item-divider - Divider line
global-watchlist__item-details - Details container
global-watchlist__detail-label - Detail label (Type, Country, etc.)
global-watchlist__detail-value - Detail value
global-watchlist__link - View profile link
global-watchlist__link-text - Link text
global-watchlist__aliases-label - "Aliases:" label
global-watchlist__item-aliases - Aliases container
global-watchlist__alias-chip - Individual alias chip
global-watchlist__image-container - Image container
global-watchlist__item-image - Profile image
global-watchlist__item-image-skeleton - Image placeholder
global-watchlist__image-source - Image source caption
global-watchlist__empty-state - Empty state container
global-watchlist__empty-icon - Empty state icon
global-watchlist__empty-title - Empty state title
global-watchlist__empty-description - Empty state description

Adverse Media

adverse-media__title - Section title
adverse-media__match-chip - Match count chip in header
adverse-media__content - Content container
adverse-media__info-list - Info list (status, topics)
adverse-media__info-item - Info list item
adverse-media__info-label - Info label
adverse-media__status - Status text
adverse-media__risk-categories - Risk categories container
adverse-media__risk-chip - Risk category chip
adverse-media__filter-toggle - Filter toggle link
adverse-media__findings-list - Findings list
adverse-media__finding - Individual finding
adverse-media__finding-container - Finding container
adverse-media__image-container - Finding image container
adverse-media__image-wrapper - Image wrapper
adverse-media__image - Finding image
adverse-media__image-skeleton - Image placeholder
adverse-media__finding-content - Finding content container
adverse-media__finding-title - Finding title
adverse-media__finding-summary - Finding summary text
adverse-media__finding-categories - Finding categories container
adverse-media__finding-category-chip - Category chip
adverse-media__finding-source - Source container
adverse-media__source-link - Source link icon button
adverse-media__source-domain - Source domain text
adverse-media__finding-divider - Divider between findings
adverse-media__empty-state - Empty state container
adverse-media__empty-icon - Empty state icon
adverse-media__empty-title - Empty state title

Error State

error__title - Error title
error__content - Error content container
error__description - Error description text
error__list - Error reasons list
error__list-item - Error reason item
error__list-item-text - Error reason text

Sex Offenders

Component Name

SexOffenders

Description

Displays the results of the [/docs/knowledge/guest-portal/addons/sex-offender-search](Sex Offender Search). If there are no results, the component does not render any content.

Options

Name	Type	Description
reservationId	String	The Autohost ID of the reservation to display.
apiToken	String	The temporary API token. More info on how to generate it.

Verification Components

ID Verification

Component Name

IDV

Description

Embeds the ID verification UI, where the user scans their ID document and submits a selfie.

Options

Name	Type	Description
reservationId	String	The Autohost ID of the reservation.
callbacks	IDVCallbacks	An object defining callbacks to be fired when certain events occur. See the IDV Component page for more information.
primaryColor (optional)	String	The color to use as the primary color for all UI components.
locale (optional)	Locales	The language to display the component in.
isSinglePage (optional)	Boolean	If true, the Autohost Activity log will show that the user submitted IDV from a Single Page.

See the IDV page for detailed information.

Selfie Step

Component Name

Selfie

Description

Used in the case when you require a user to re-submit their selfie image. This should always be a stand-alone step used when a selfie submitted as part of IDV is unsatisfactory, not a part of your normal Guest Portal flow.

Options

Name	Type	Description
reservationId	String	The Autohost ID of the reservation.
callbacks	SelfieCallbacks	An object defining callbacks to be fired when certain events occur. See the IDV Component page for more information.
primaryColor (optional)	String	The color to use as the primary color for all UI components.
locale (optional)	Locales	The language to display the component in.
isSinglePage (optional)	Boolean	If true, the Autohost Activity log will show that the user submitted their Selfie from a Single Page.

Selfie Callbacks

Name	Parameters	Event
onStartImageUpload		User has submitted an image.
onImageUploadComplete		The image has been accepted and verified.
onImageUploadFailed	errorMessage: string	The image has been rejected. This could be because it is illegible, not an image of a person, or there is something else wrong with the image.

Document Signing

Component Name

ElectronicSignature

Description

The Electronic Signature component enables users to view legal documents and capture digital signatures directly within your application.

Options

Name	Type	Description
reservationId	String	The Autohost ID of the reservation.
emailSignedCopy	String	Send an email copy of the executed document (default: true)
signatureModes (optional)	SignatureMode[]	Available signature capture modes are `type` and `draw`. Defaults to `['type']`.
callbacks (optional)	ElectronicSignatureCallbacks	An object defining callbacks to be fired when certain events occur.
primaryColor (optional)	String	The color to use as the primary color for all UI components.
locale (optional)	Locales	The language to display the component in.

See the ElectronicSignature page for detailed information.Ï

Autohost

Talk to Sales

Description​

Admin Components​

Verification Components​

Usage​

Custom Styles​

Localization​

Admin Components​

Reservation Results​

CSS Custom Properties (Variables)​

Global Typography Classes​

Main Container​

Card Components​

Headers​

Verification Status​

Definition Lists​

ID Check Section​

ID Images​

Top Concerns​

Top Recommendations​

Top Verifications​

Report Download​

Information Section​

Fraud Detection​

Global Watchlist​

Adverse Media​

Error State​

Sex Offenders​

Verification Components​

ID Verification​

Selfie Step​

Document Signing​

Autohost

Description

Admin Components

Verification Components

Usage

Custom Styles

Localization

Admin Components

Reservation Results

CSS Custom Properties (Variables)

Global Typography Classes

Main Container

Card Components

Headers

Verification Status

Definition Lists

ID Check Section

ID Images

Top Concerns

Top Recommendations

Top Verifications

Report Download

Information Section

Fraud Detection

Global Watchlist

Adverse Media

Error State

Sex Offenders

Verification Components

ID Verification

Selfie Step

Document Signing