# Onboarded Components

Onboarded Components allow you to embed UI elements from the Onboarded platform. These components allow you to easily interact with E-Verify cases and employee data.

 Onboarded collaborates closely with our partners to deliver high-value, embeddable components prioritized based on customer feedback and needs. Our goal is to ensure that the most impactful features are readily available and seamlessly integrate in your app. 

### How do I setup a Component?

 Generated component URL's will expire after 72 hours. 

You will need an API Token to use Components. If you do not have one already, create one under `Settings -> API Tokens -> Create new API Token`

Make a `POST` request to the Component Token endpoint to generate a Component URL. This should be a server-side request.

For this example, we are generating a url for an E-Verify Component.


```EditorConfig
// Request
curl  -X POST \
  'https://app.onboarded.com/api/v1/components/create_url' \
  -H 'Authorization: Bearer <YOUR_TOKEN_HERE> \
  -H 'Content-Type: application/json' \
  -d '{
    "component": "everify/cases"
  }'

// Response
{
  "redirect_url": "https://app.onboarded.com/components/authorize?code=4d153f2e-ee76-4992-ae2a-f121acfd27b5&component=everify%2Fcases"
}
```

This endpoint will return a `redirect_url` that can be used in an iframe to embed the Component in your app.


```EditorConfig
// your_page.tsx
<div>
  <p>My app</>
  <iframe src={`${response.redirect_url}`} />
</div>
```

Now your page is setup to embed the Component. Remember to perform the Component Token request server-side so your Api Token is not exposed via the browser.

### Supported Components

**E-Verify Cases**
![everifyCaseStatusComponent.png](/assets/onboardedcomponentseverifycasestatuscomponent.337a8c72eb83cfe08ec8cabe5d4eef820e3f30e8584c130cf3b7495ae49b2c96.9bb1daa4.png)

br
**Employees List**
![employeesListComponent.png](/assets/onboardedcomponentsemployeelistcomponent.8ad2485f2184520b7ddb7284e3f572c5742503bc53bfae544528fc71c3c04c50.9bb1daa4.png)

**Employee Tasks**
![employeeTasksComponent.png](/assets/onboardedcomponentsemployeetaskscomponent.ea4aebe54b2bb7e7c2e31033426ae62254ffc08e57397ea2364d7fce6cf26380.9bb1daa4.png)