Drop-in overview

Overview

Monite’s Drop-in Components is a fully embeddable UI component library built upon JavaScript’s Web Components. It facilitates the integration of diverse UI elements into your web application. You can choose to bring in individual components or use the library as a single, comprehensive component serving as an all-in-one UI solution.

Using the Monite Drop-in Components library

You can use Monite’s Drop-in Components directly from a CDN via a script tag in your HTML. Doing this requires no “build step”, as the process does not require module bundlers.

1
<script
2
  type="module"
3
  async
4
  src="https://cdn.sandbox.monite.com/monite-app.js"
5
></script>

To use the Drop-in library in production via the CDN, use the following link: https://cdn.monite.com/monite-app.js.

Alternatively, we also provide the Monite Drop-in Components library as an NPM package, making it easier to load and use as a module. To use the Drop-in Components package, install the package using your preferred package manager as shown:

1
npm install @monite/sdk-drop-in

Next, import the package into your application as shown:

1
import "@monite/sdk-drop-in";

The monite-app element

The monite-app element is a custom HTML element that contains the UI and configuration for Monite’s Drop-in components. The monite-app element houses a comprehensive component serving as an all-in-one UI solution, providing a unified interface for interaction with Monite’s product offerings.

Add the monite-app element into your application and include the required attributes as shown:

1
<monite-app
2
  entity-id="ENTITY_ID"
3
  api-url="https://api.sandbox.monite.com/v1"
4
  component="receivables"
5
  basename="/"
6
></monite-app>

Use this element to render individual pages by including the component attribute. For example, the following snippet shows the configuration to render the Payables page:

1
<monite-app
2
  entity-id="ENTITY_ID"
3
  api-url="https://api.sandbox.monite.com/v1"
4
  component="payables"
5
  basename="/"
6
></monite-app>

The following table shows all the monite-app element’s attributes and their description:

Authentication

The Monite Drop-in components library handles authorization using an HTML script tag. The script tag must be embedded within the monite-app element and assigned a slot attribute with a value of fetch-token as shown:

1
<monite-app
2
  entity-id="ENTITY_ID"
3
  api-url="https://api.sandbox.monite.com/v1"
4
  component="products"
5
  basename="/"
6
>
7
  <script slot="fetch-token">
8
    async function fetchToken() {
9
      const request = {
10
        grant_type: "entity_user",
11
        entity_user_id: "ENTITY-USER_ID",
12
        client_id: "CLIENT_ID",
13
        client_secret: "CLIENT_SECRET",
14
      };
15
16
      const response = await fetch(
17
        "https://api.sandbox.monite.com/v1/auth/token",
18
        {
19
          method: "POST",
20
          headers: {
21
            "Content-Type": "application/json",
22
            "x-monite-version": "2024-05-25",
23
          },
24
          body: JSON.stringify(request),
25
        }
26
      );
27
28
      return await response.json();
29
    }
30
  </script>
31
</monite-app>

Theming

The Monite Drop-in components library also supports theming. To include theming, define the object that describes the custom themes within a script tag in your HTML. The script tag that contains your custom theme is assigned a slot attribute with a value of theme as shown:

1
<monite-app
2
  entity-id="ENTITY_ID"
3
  api-url="https://api.sandbox.monite.com/v1"
4
  basename="/"
5
  component="receivables"
6
>
7
  <script slot="theme" type="application/json">
8
    {
9
      "typography": {
10
        "fontFamily": "Comic Sans MS, Comic Sans, cursive, monospace",
11
        "h2": {
12
          "fontSize": "26px",
13
          "fontWeight": "500"
14
        }
15
      }
16
    }
17
  </script>
18
</monite-app>

Localization

You can also customize the locale of the Monite Drop-in components. To include localization, define the object describing the localization within a script tag in your HTML. The script tag that contains your custom theme is assigned a slot attribute with a value of locale as shown:

1
<monite-app
2
  entity-id="ENTITY_ID"
3
  api-url="https://api.sandbox.monite.com/v1"
4
  basename="/"
5
  component="counterparts"
6
>
7
  <script slot="locale" type="application/json">
8
    {
9
      "code": "en-US", // default: de-DE
10
      "messages": {
11
        "Counterpart Name": "Supplier Name",
12
        "Counterpart": "Supplier"
13
      }
14
    }
15
  </script>
16
</monite-app>

Next steps

You have now learned about the Monite Drop-in component library. For a detailed quickstart guide with detailed usage examples, see Drop-in quick start.