Web Integration

Web Integration

Add personalization to your web app with a single component.

Quick Start

npm install onairos

import Onairos from 'onairos';

Add the OnairosButton

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.