Embeddable Client Components

Description

Our SDK provides you with embeddable UI components to help build your integration with Autohost. For all Public Components, we embed a Preact micro-app in your own app. For 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

Public Components

Public 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 by providing your SDK Key. You can also indicate if you want to access the sandbox (develop) environment, or production.

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

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 Public 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.

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.

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)

Public 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.

See the IDV page for detailed information.

Autohost

Talk to Sales