Drop-in quick start
Get started with Monite’s Drop-in web component.
Overview
The fastest and recommended way to embed Monite’s UI into your web application is to utilize the Drop-in 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 and Step 2: Implement 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
Yarn
After installation via NPM or Yarn, you must import the SDK to use Monite’s Drop-in components in your application:
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:
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.
The fetchToken
function obtains the user authentication.
(Optional) Configure components
During the Drop-in instance creation, you can set the configuration of the components:
Here are the components and respective parameters you can configure:
Approval Policies
Approval Requests
Counterparts
Payables
Products
Receivables
Tags
User Roles
(Optional) Theming
You can customize the theme of the component as shown:
(Optional) Localization
You can customize the locale of the component renderings as shown:
3: Set up user authentication
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.
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:
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:
(Optional) Events
You can subscribe to events in the Monite system:
Here is the list of events you can subscribe:
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.