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.
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. This includes the status of the reservation, any concerns flagged by our screening AI, and the results of the ID verification, 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. |
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
| 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. |
