# JavaScript

## Orba One

To integrate the Orba One SDK, follow this guide and use your own API Key which you can obtain from the [developer dashboard](https://dashboard.orbaone.com).

The integration of the Orba One Web SDK follows these simple steps:

1. Install the SDK through NPM / Yarn
2. Get an API Key
3. Render the Orba One verification button and handle the result

Additionally, there is a non-package manager installation option. You can start using the Orba One SDK library directly by including it in your HTML file. Instructions can be found below.

## 1. Install the SDK

```bash
# Yarn
yarn add @orbaone/core

# NPM
npm install --save @orbaone/core
```

## 2. Get an API Key

Orba One uses API keys to allow access to the API and show onboarded users in your dashboard. Login to your Orba One account and create a new Orba One API key here: [Developer Dashboard](https://vendor.orbaone.com).

## 3. Render the verification button

**Import the Orba One SDK**

```javascript
import { renderButton } from "@orbaone/core";
```

#### Example Usage

```javascript
renderButton({
  apiKey: "exampleAPIKey",
  applicantId: "0000-0000-0000-0000",
  target: "#button",
  disableStyle: false,
  onSuccess: (data) => {console.log(data)},
  onCancelled: (data) => {console.log(data)},
  onError: (err) => {console.log(err)},
  steps: ['welcome'],
})
```

#### renderButton(config) Options

| Parameter    | Type                 | Description                                       |
| ------------ | -------------------- | ------------------------------------------------- |
| target       | string or DOMElement | The DOM element you want to mount the button on.  |
| apiKey       | string               | The OrbaOne Key you obtained from the dashboard.  |
| applicantId  | string               | The ID of the applicant that you want to onboard. |
| disableStyle | boolean (optional)   | The OrbaOne Key you obtained from the dashboard.  |
| onSuccess    | function             | Callback function after onboarding is complete.   |
| onError      | function             | Callback function if onboarding has failed.       |
| steps        | array                | Array of verification steps.                      |

### Browser

Orba One is available over [unpkg](https://unpkg.com/) CDN

```
<script type="text/javascript" defer="true" src="https://unpkg.com/@orbaone/core@1.0.18/lib/index.umd.js" />
```

#### Example Usage

```markup
<script type="text/javascript">
    OrbaOne.renderButton({
        apiKey: "exampleAPIKey",
        applicantId: "0000-0000-0000-0000",
        target: "#button",
        disableStyle: false,
        onSuccess: (data) => {
            console.log(data);
        },
        onError: (err) => {
            console.log(err);
        },
        onCancelled: (state) => {
             console.log(state);
        },
        steps: ["welcome"],
    });
</script>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.orbaone.com/integration/javascript.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.