> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.monite.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.monite.com/_mcp/server.

# Drop-in quick start

## Overview

You can embed Monite's UI into your web application is to utilize the [Drop-in](../../sdks/drop-in/index) library, which contains pre-built JavaScript web components that can be integrated into almost all types of web apps.

To learn how this can be done, follow the steps in this tutorial.

## Before you begin

Before proceeding with this tutorial, make sure you completed the steps in the [Step 1: Get your credentials](../credentials) and [Step 2: Implement server side](../server-side) guides.

## 1. Add monite to your app

The fastest way to add Monite to your app is to use NPM or Yarn to install Monite as a package:

#### npm

```shell
npm install @monite/sdk-drop-in
```

#### Yarn

```sh
yarn add @monite/sdk-drop-in
```

After installation via NPM or Yarn, you must import the SDK to use Monite's Drop-in components in your application:

```js
import('@monite/sdk-drop-in').then(({ MoniteDropin }) => {
  // ...     
});
```

## 2. Create a Drop-in instance

To create a Drop-in instance that contains the UI and configuration for the Drop-in components, add to your application:

```js
const dropinConfig = {
  entityId: 'ENTITY_ID',
  apiUrl: 'ENVIRONMENT_URL',
  fetchToken: async function fetchToken() {...},
};

const dropin = new MoniteDropin(dropinConfig);

dropin.create(component).mount(...);
```

Here, the `apiUrl` parameter should be set to the base URL for all routes in your application, but you can leave it empty in this tutorial.

Note that the `entity-id` parameter here should be automatically set to the entity ID you generated in [Step 2: Implement server side](../server-side).

The `fetchToken` function obtains the [user authentication](#auth).

### (Optional) Configure components

During the Drop-in instance creation, you can set the configuration of the components:

```js
const dropinConfig = {
  entityId: 'ENTITY_ID',
  apiUrl: 'ENVIRONMENT_URL',
  componentSettings: {
    receivables: {},
    counterparts: {
      customerTypes: ['customer'],
    },
  },

  fetchToken: async function fetchToken() {...},
};

const dropin = new MoniteDropin(dropinConfig);

dropin.create(component).mount(...);
```

Here are the components and respective parameters you can configure:

#### Approval Policies

| Parameter       | Values      |
| --------------- | ----------- |
| pageSizeOptions | 15, 50, 100 |

#### Approval Requests

| Parameter       | Values      |
| --------------- | ----------- |
| pageSizeOptions | 15, 50, 100 |

#### Counterparts

| Parameter       | Values               |
| --------------- | -------------------- |
| pageSizeOptions | 15, 50, 100          |
| customerTypes   | `customer`, `vendor` |

#### Payables

| Parameter       | Values      |
| --------------- | ----------- |
| pageSizeOptions | 15, 50, 100 |

#### Products

| Parameter       | Values      |
| --------------- | ----------- |
| pageSizeOptions | 15, 50, 100 |

#### Receivables

| Parameter       | Values      |
| --------------- | ----------- |
| pageSizeOptions | 15, 50, 100 |

#### Tags

| Parameter       | Values      |
| --------------- | ----------- |
| pageSizeOptions | 15, 50, 100 |

#### User Roles

| Parameter       | Values      |
| --------------- | ----------- |
| pageSizeOptions | 15, 50, 100 |

### (Optional) Theming

You can customize the theme of the component as shown:

```js
const dropinConfig = {
  entityId: 'ENTITY_ID',
  apiUrl: 'ENVIRONMENT_URL',
  theme: {
    colors: {
      primary: '#562BD6',
    },
  },
  fetchToken: async function fetchToken() {...},
};

const dropin = new MoniteDropin(dropinConfig);

dropin.create(component).mount(...);
```

### (Optional) Localization

You can customize the locale of the component renderings as shown:

```js
const dropinConfig = {
  entityId: 'ENTITY_ID',
  apiUrl: 'ENVIRONMENT_URL',
  locale: {
    code: 'en-US',
    messages: {
      Sales: 'Invoicing',
      Counterparts: 'Customers',
    },
  },
  fetchToken: async function fetchToken() {...}, 
};

const dropin = new MoniteDropin(dropinConfig);

dropin.create(component).mount(...);
```

## 3: Set up user authentication \[#auth]

Every entity user of the Monite app should authorize themselves with a mechanism that is used in your web application. When a user is authorized by you, you should also issue an entity user token, as described in the previous [Step 2: Implement server side](../server-side).

If you already implemented a backend part that is capable of issuing entity user tokens, then write a function that retrieves this token.

However, if you have not implemented the backend part yet but can already generate an entity and entity user token, you can also just send a `POST` request to the `/auth/token` endpoint directly from this script, as shown below:

```js
  async function fetchToken() {
    const request = {
      grant_type: "entity_user",
      entity_user_id: "ENTITY_USER_ID",
      client_id: "CLIENT_ID",
      client_secret: "CLIENT_SECRET",
    };

    const response = await fetch(
      "https://api.sandbox.monite.com/v1/auth/token",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "x-monite-version": "2024-05-25",
        },
        body: JSON.stringify(request),
      }
    );
    return await response.json();
  }
```

> **Warning**
>
> Monite does not recommend exposing the credentials in your `fetchToken` function on the client side as shown earlier. For security reasons, we recommend that all Monite tokens are generated from your server-side code.

## 4: Review the code

Finally, you can compare your resulting code with our template to make sure that everything is correct:

```js
const dropinConfig = {
  entityId: 'ENTITY_ID',
  apiUrl: 'ENVIRONMENT_URL',
  componentSettings: {
    receivables: {},
    counterparts: {
      customerTypes: ['customer'],
    },
  },
  theme: {
    colors: {
      primary: '#562BD6',
    },
  },
  locale: {
    code: 'en-US',
    messages: {
      Sales: 'Invoicing',
      Counterparts: 'Customers',
    },
  },
  fetchToken: async function fetchToken() {...},
};

const dropin = new MoniteDropin(dropinConfig);

dropin.create(component).mount(...);
```

## (Optional) Events

You can subscribe to events in the Monite system:

```js
import('@monite/sdk-drop-in').then(({ MoniteDropin, MoniteEventTypes }) => {
  const dropinConfig = {...};
  const dropin = new MoniteDropin(dropinConfig);
  dropin.create(component).mount(moniteAppRef.current);

  // Subscribe to events <===
  dropin
    .on(MoniteEventTypes.INVOICE_CREATED, () => {
      console.log('invoice.created');
    });
});
```

Here is the list of events you can subscribe:

| Event name                             | Description                                                       |
| -------------------------------------- | ----------------------------------------------------------------- |
| `INVOICE_CREATED`                      | An invoice was created.                                           |
| `INVOICE_UPDATED`                      | An invoice was updated.                                           |
| `INVOICE_DELETED`                      | An invoice was deleted.                                           |
| `INVOICE_SENT`                         | An invoice was sent.                                              |
| `PAYABLE_APPROVED`                     | A payable was approved.                                           |
| `PAYABLE_CANCELED`                     | A payable was canceled.                                           |
| `PAYABLE_DELETED`                      | A payable was deleted.                                            |
| `PAYABLE_PAY`                          | A payable was paid.                                               |
| `PAYABLE_REJECTED`                     | A payable was rejected.                                           |
| `PAYABLE_REOPENED`                     | A payable was reopened.                                           |
| `PAYABLE_SAVED`                        | A payable was saved.                                              |
| `PAYABLE_SUBMITTED`                    | A payable was submitted for approval.                             |
| `PAYMENTS_ONBOARDING_COMPLETED`        | The payments onboarding process was completed.                    |
| `WORKING_CAPITAL_ONBOARDING_COMPLETED` | The working capital (financing) onboarding process was completed. |

## Next steps

By completing this quick start, you have learned how to:

* Install and set up Monite Drop-in SDK.
* Localize it and change the default appearance.

To learn more about this integration, see [Drop-in library](../../sdks/drop-in/index).