Skip to main content

Embeddable Client Components


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


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" />

Reservation Results

Component Name



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.

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)