Skip to main content

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.

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.

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.

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

Admin Components

Reservation Results

Component Name

ReservationResults

Description

Displays the Autohost verification results. This includes the status of the reservation, any concerns flagged by our screening AI, and the results of the ID verification, if available.

Options

NameTypeDescription
reservationIdStringThe Autohost ID of the reservation to display.
apiTokenStringThe temporary API token. More info on how to generate it.
stylesStyles (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.
info

For this MVP version of the SDK, we are using Material UI to create some of the components. Some of these class names are generated at build time, and may be unreliable. mui-185gdzj-MuiCardHeader-root is one example. We suggest not using targetting those classes. Use the primary MUI class names, like "MuiCardHeader-root", or the semantic class names we have added. (IE card, header, definition-list_item)

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

NameTypeDescription
reservationIdStringThe Autohost ID of the reservation to display.
apiTokenStringThe 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

NameTypeDescription
reservationIdStringThe Autohost ID of the reservation.
callbacksIDVCallbacksAn object defining callbacks to be fired when certain events occur. See the IDV Component page for more information.
primaryColor (optional)StringThe colour to use as the primary colour for all UI components.
locale (optional)LocalesThe language to display the component in.
isSinglePage (optional)BooleanIf 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

NameTypeDescription
reservationIdStringThe Autohost ID of the reservation.
callbacksSelfieCallbacksAn object defining callbacks to be fired when certain events occur. See the IDV Component page for more information.
primaryColor (optional)StringThe colour to use as the primary colour for all UI components.
locale (optional)LocalesThe language to display the component in.
isSinglePage (optional)BooleanIf true, the Autohost Activity log will show that the user submitted their Selfie from a Single Page.

Selfie Callbacks

NameParametersEvent
onStartImageUploadUser has submitted an image.
onImageUploadCompleteThe image has been accepted and verified.
onImageUploadFailederrorMessage: stringThe 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.