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.

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:

Main Container

• root - The main container of the component

Card Components

• card - Base class for all cards
• 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_id-verification-document - ID verification document 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_id-verification-document - ID verification document header

Verification Status

• verification-status-card - Container for verification status
• verification-status-header - Header of verification status section
• verification-status-item - Individual status items
• verification-status-info - Info icon button
• verification-status-approve-btn - Approve button
• verification-status-decline-btn - Decline button
• verification-status-dialog - Status update dialog
• verification-status-dialog-error - Error message in dialog
• verification-status-decline-reason - Decline reason selector
• 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_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 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 and Recommendations

• top-concerns__item - Individual concern items
• top-recommendations__item - Individual recommendation items

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 colour to use as the primary colour 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 colour to use as the primary colour 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.

Autohost

Talk to Sales