Skip to main content

Embeddable Client Components

Description

Our SDK provides you with embeddable UI components to help build your integration with Autohost:

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({
apiToken: "AUTOHOST_SDK_KEY",
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" />

Reservation Results

Component Name

ReservationResults

Options

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

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)