Admin UI: Getting Started

This guide will help you understand how to use the Autohost SDK to display verification results from the the Autohost Screening AI in your own dashboard. We suggest reviewing our Knowledge Base article on the different Reservation Verifications available to understand what data these components can display.

Review the Embeddable Client Components page to see what components are available to add to your dashboard.

Authentication

Admin Components reveal sensitive, personal information, so proper authorization and authentication are crucial for maintaining the security and integrity of your data, as well as ensuring that access is correctly restricted to authorized users only.

Creating an SDK Key

Before you start, you'll need an SDK key. Create your key in the API settings section of your Autohost account:

1. Log in to Autohost Dashboard.
2. Navigate to Settings > API.
3. Select Create SDK Key.
4. (Optional) Rename the key to an appropriate name for your control and organization.
5. Copy the key and securely store it.

Creating a Temporary Token

NOTE: this is only required to access Admin Components.

To access features and data available via the Autohost Dashboard, which are not publicly accessible, a temporary token is required.

This token ensures that users can access only the specific resources assigned to them, with the security of a limited access window. You will need to create a short-lived API token in your backend for this purpose. The token's validity is capped at 5 minutes, ensuring tight control over data access:

Here's how you can generate this token using the Autohost SDK:

type Filter = {
    scope: string;  // Access scope: read, write
    level: string;  // Access level: reservation, listing
    id: string;     // ID associated with ACL
};

type ACL = {
    filters: Filter[];
};

const API_TOKEN = await AutohostSDK.createSecuredToken(
    sdkToken: string, acl: ACL
);

Backend Token Generation

If your backend is not JavaScript-based, you can generate the token directly through our API:

curl -X POST "https://embed.autohost.ai/api/auth?token=YOUR_SDK_KEY" \
  -H "Content-Type: application/json" \
  -d '{
      "filters": [
          {
              "scope": "read",
              "level": "reservation",
              "id": "YOUR_RESERVATION_ID"
          }
      ]
  }'

Remember to set Content-Type: application/json in your headers. The request payload should include the ACL object. The response will resemble:

{
  "id": "acl_c7285287-****-****-****-************",
  "createdAt": 1695675463,
  "token": "c7285287-****-****-****-************",
  "user": "AYbNJLNg************",
  "validUntil": 1695675763,
  "filters": [
    {
      "scope": "read",
      "level": "reservation",
      "id": "************mQreBE_e"
    }
  ]
}

Initializing the Client

After obtaining your temporary token, initialize the client for the Autohost SDK:

const client = await AutohostSDK.init({
  reservationId: RESERVATION_ID,
});

Then mount your desired Admin Component, and provide your temporary token in the options object:

client.component("COMPONENT_NAME", { apiToken: API_TOKEN, }).mount("#target");

<div id="target"></div>

Autohost

Talk to Sales