Drop-in overview
Use Monite's Drop-in Components to quickly build your user interface.
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.
![Preview of Monite's Drop-in components library](https://fdr-prod-docs-files-public.s3.amazonaws.com/monite.docs.buildwithfern.com/2024-09-06T15:25:09.245Z/docs/assets/img/drop-in/drop-in.overview.png)
Drop-in components responsiveness
As of this release, the Monite Drop-in is optimized for desktop use and may not provide the desired responsiveness on mobile and tablet views. We are actively working to enhance support for these platforms in future updates.
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.
To use the Drop-in library in production via the CDN, use the following link: https://cdn.monite.com/monite-app.js
.
Loading the Drop-in library via a CDN makes it available in your application and requires no further configuration.
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:
Next, import the package into your application as shown:
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:
HTML
React.js
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:
The following table shows all the monite-app
element’s attributes and their description:
The component
attribute is a required attribute that specifies the Drop-in component page to render from the library. Possible values for the component
attribute include approval-policies
, counterparts
, onboarding
, payables
, products
, receivables
, and tags
.
Authentication
Drop-in credentials
The Monite Drop-in library accepts only entity-user tokens as credentials within the fetchToken
function. Attempting to use a partner token with the library will throw an error. For more information about entity user tokens and permissions required, see Generate an entity user token and List of permissions.
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:
Monite does not recommend exposing the credentials of 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.
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:
The script
tag bearing the theme must be embedded within the monite-app
element. For more information on customizing Monite Drop-in components see Theming and customization.
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:
The currencyLocale
property must adhere to the BCP-47 language tag standard. For more information on including localization in Monite’s Drop-in components, see Localization.
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.