# 1 Line of Code

![](https://1793222555-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCIECLdy0c6Hn11yWwBnI%2Fuploads%2FAtTEqVfybCwzUiA9yEQa%2Fimage.png?alt=media\&token=df325d65-6292-42b1-a80a-4c42a70d3bb8)

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

```javascript
<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
/>
```

className : Tailwindcss (CSS) for height, width sizing and margins

Onairos Object fields:

* <mark style="color:red;">webpageName</mark> - String - **Required** - App Display Name
* <mark style="color:red;">requestData</mark> - Json - **Required** - User Request data ([See Below)](#request-data-object)&#x20;
* <mark style="color:red;">textColor</mark> - String - **Optional** - Text Color of Onairos Button

  ```typescript
  'black' | 'white'
  ```
* <mark style="color:red;">textLayout</mark> - String - **Optional** - Position of Onairos Title relative to Button Icon

  ```typescript
  'right' | 'left' | 'below' | 'none';
  ```
* <mark style="color:red;">autoFetch</mark> - Boolean - **Optional** - Whether to automatically fetch user data as soon as they consent&#x20;
* <mark style="color:red;">onComplete</mark> - Function - **Optional** - Function to fetch user data via API manually

  ```typescript
        onComplete: (data: any, error?: Error) => void; 
  ```
* <mark style="color:red;">inferenceData</mark> - Json ([Format](https://onairos.gitbook.io/docs/developer-guides/manual-api-call/using-the-inference-api#input-format)) - **Optional (Required if autoFetch = true)** -  Inference Input Data
* <mark style="color:red;">`proofMode`</mark> - Boolean - **Optional** - ZK proof returned after recieving Data&#x20;

### Request Data Object

```json
"RequestObject":{ 
    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"
    }
  }

```

#### Setup the Onairos Connection Object

Create the Request Object which Users will Authorize (or not) in the overlay popup

RequestObject.name key:

* `personality_traits` - A distillation of the users most unique traits and personality
* `sentiment_analysis` - You provide a text/image (video/sound soon) input (<mark style="color:red;">inferenceData</mark>) into our API and we provide a score of how much the user liked or disliked that item. These could be genres of movies or items, categories or archetypes of people, personality types, best selling items etc

Individual Request Information:

* `name`: Name of your request
* `description`: Description to display to users about your request
* `reward`: Reward Given to User for granting Data Request

## That is all for the setup and users you can now recieve user data in the OnComplete function

Please go to our [Demo](https://internship.onairos.uk) to see an example Onairos integration

**If you set autoFetch = false, you will need to manually fetch the user data using the** [**following**](https://onairos.gitbook.io/docs/developer-guides/integrate-onairos-web/manual-api-call/receiving-api)