Web Integration

Web Integration

Use the onairos package to add the Onairos consent flow to any web app.

1. Install the package

npm install onairos

2. Initialize the SDK

import { OnairosButton, initializeApiKey } from 'onairos';

await initializeApiKey({
  apiKey: 'your_api_key'
});

Call initializeApiKey() once when your app starts. On web, autoFetch defaults to true, so the SDK usually fetches the approved data for you automatically.

What the main props do

If you are scanning this page quickly, this is the main section to read.

Prop	Type	Required	Description
webpageName	String	Yes	The app name shown to the user inside the Onairos flow
requestData	Array<string>	Yes	The consent scopes your app asks for. In the current web flow, use scope ids like preferences, personality, and rawMemories.
autoFetch	Boolean	No	Defaults to true on web. If enabled, the SDK fetches the Persona response and places it in result.apiResponse.
onComplete	Function	No	Called when the flow finishes. You receive the final result object here.
inferenceData	Object	No	The items to score when your app wants content scoring or inference.
allowedPlatforms	Array<string>	No	Filters the visible connector list by display name or connector id such as YouTube or youtube.
rawMemoriesOnly	Boolean	No	Shows only LLM connectors for raw memories flows.
rawMemoriesConfig	Object	No	Optional configuration for raw memories collection.

Minimal example

<OnairosButton
  webpageName="YourApp"
  requestData={['preferences', 'personality']}
  onComplete={(result) => console.log(result)}
/>

How to write requestData

requestData is a list of consent scopes that tells the SDK what your app wants to ask the user for.

["preferences", "personality"]

Add rawMemories only if your app needs approved LLM conversation data:

["preferences", "personality", "rawMemories"]

Supported request types

• preferences: Use this when your app wants the user's interests and preference signals for personalization.
• personality: Use this when your app wants deeper personality-driven personalization or scoring.
• rawMemories: Use this only when your app needs approved LLM conversation context.
• basic: Basic account and profile context that is included by the flow.

Connector customization

The current web SDK lets you limit which connectors appear, or switch the flow to LLM-only mode for raw memories collection.

<OnairosButton
  webpageName="YourApp"
  requestData={['preferences', 'personality']}
  allowedPlatforms={['chatgpt', 'youtube', 'linkedin']}
  onComplete={(result) => console.log(result)}
/>

• allowedPlatforms filters the default connector list by display name or connector id.
• On web, allowedPlatforms filters the SDK's default order. It does not reorder the list to match the order you pass in.
• If your app is using a special preset such as Wrapped, Valentine, or Lunar, that preset overrides developer-provided connector filters.
• If rawMemoriesOnly is true, the SDK shows only LLM connectors and ignores allowedPlatforms.
• Use rawMemoriesConfig only when you need extra controls for raw memories collection.

The legacy priorityPlatform prop still appears in some older integrations, but it does not currently reorder the main web connector grid. Use allowedPlatforms or rawMemoriesOnly instead.

What you get in onComplete

The callback gives you one result object. The most useful fields are:

Field	Meaning
token	Short-lived JWT used to call the returned API URL
apiUrl	The downstream API URL returned for this request
apiResponse	The fetched response when autoFetch is enabled
userData	User and session details gathered during the flow
approved / approvedData	The data types the user approved

Choose your fetch mode

• autoFetch={true}: The SDK fetches the result for you and puts it in result.apiResponse.
• autoFetch={false}: Your app gets token and apiUrl, then makes the request itself.

When autoFetch is false

If you want full control over the API request, disable autoFetch and call the returned apiUrl yourself.

const handleComplete = async (result) => {
  const response = await fetch(result.apiUrl, {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer ' + result.token,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      Input: {
        item1: { text: 'Product description', category: 'fashion' }
      }
    })
  });

  const data = await response.json();
  console.log(data);
};

Send Input only when you are requesting inference scoring. For traits-only or profile-style responses, you can omit Input.