Integrate Onairos Web

Integrate Onairos Web

In the following guide, we will show you how A Single Line Of Code can augment your application to meet the needs of every individual user!

Create a Developer Account

Create a Developer account to access Onairos services. Register your domain to ensure secure API access.

Go to Developer Dashboard →

Installation

npm install onairos

Import the package as a default import:

import Onairos from 'onairos';

One Line of Code

Instantiate the Onairos object to add the Onairos button onto your application which asks the user for the Persona Data:

<OnairosButton
  className=""
  AppName="YourAppName"
  onResolved={handleComplete}
  requestData={{
    personality_traits: {
      name: "Personality Analysis",
      description: "Deep analysis of your Personality for fashion recommendations",
      reward: "10% discount from next basket"
    },
    sentiment_analysis: {
      name: "Interest Analysis", 
      description: "Understanding your interests and preferences for fashion recommendations",
      reward: "1 free recommended item"
    }
  }}
  debug={true}  // Enable for development
  testMode={true}  // Enable for testing
  auto={true}  // 🚀 MAGIC: Auto-fetch data without managing API call manually
/>

Button Props

Prop	Type	Required	Description
webpageName	String	Yes	App Display Name
requestData	JSON	Yes	User Request data object
textColor	String	No	'black' | 'white'
textLayout	String	No	'right' | 'left' | 'below' | 'none'
autoFetch	Boolean	No	Auto-fetch user data on consent
onComplete	Function	No	Callback: (data, error?) => void
inferenceData	JSON	If autoFetch	Inference Input Data
proofMode	Boolean	No	Return ZK proof after receiving data

Request Data Object

Create the Request Object which Users will authorize in the overlay popup:

{
  "personality_traits": {
    "name": "Fashion Personality Analysis",
    "description": "Deep analysis of your Personality for fashion recommendations",
    "reward": "10% discount from next basket"
  },
  "sentiment_analysis": {
    "name": "Recent Interest and Themes", 
    "description": "Understanding your interests and preferences for fashion recommendations",
    "reward": "1 free recommended item"
  }
}

Request Types

• personality_traits — A distillation of the user's most unique traits and personality
• sentiment_analysis — You provide text/image input and we provide a score of how much the user liked or disliked that item

Individual Request Fields

• name: Name of your request
• description: Description to display to users about your request
• reward: Reward given to user for granting data request

If you set autoFetch = false, you will need to manually fetch the user data using the Manual API Call guide.