Drop-in overview
Use Monite's Drop-in Components to quickly build your user interface.
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
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.
<script type="module" async src="https://sdk-demo.sandbox.monite.com/monite-app.js"></script>
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:
npm install @monite/sdk-drop-in
Next, import the package into your application as shown:
import "@monite/sdk-drop-in";
The monite-app
element
monite-app
elementThe 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:
<monite-app
entity-id="ENTITY_ID"
api-url="https://api.sandbox.monite.com/v1"
basename="/"
></monite-app>
return (
<div className="App">
<div
dangerouslySetInnerHTML={{
__html: `
<monite-app
entity-id="ENTITY_ID"
api-url="https://api.sandbox.monite.com/v1"
basename="/"
></monite-app>
`,
}}
/>
</div>
);
Depending on your use case and configuration, you can also use this element to render individual pages by including the component
attribute. For example, the following snippet shows the configuration to render the Receivables
page
<monite-app
entity-id="ENTITY_ID"
api-url="https://api.sandbox.monite.com/v1"
component="receivables"
basename="/"
></monite-app>
The following table shows all the monite-app
element's attributes and their description:
Attribute | Description |
---|---|
entity-id | The Monite entity to which the entity user belongs. |
api-url | The URL for the API in use. |
component | This is an optional attribute that accepts Monite component page to be rendered. If not provided, the monite-app element renders the entire Drop-in components UI. |
basename | The base URL for all routes in your application. |
The
component
attribute should only be used when you want to render specific pages from the Drop-in components library. Possible values for thecomponent
attribute includepayables
,receivables
,counterparts
,tags
, andapproval-policies
.
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:
<script slot="fetch-token">
// custom function that returns Monite authorization tokens for the entity user
</script>
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:
<monite-app
entity-id="ENTITY_ID"
api-url="https://api.sandbox.monite.com/v1"
basename="/"
>
<script slot="theme" type="application/json">
{
"fontFamily": "Comic Sans MS, Comic Sans, cursive, monospace"
}
</script>
</monite-app>
The
script
tag bearing the theme must be embedded within themonite-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:
<monite-app
entity-id="ENTITY_ID"
api-url="https://api.sandbox.monite.com/v1"
basename="/"
>
<script slot="locale" type="application/json">
{
code: "en-US", // default: de-DE
messages: {
"Counterpart Name": "Supplier Name",
"Counterpart": "Supplier"
}
}
</script>
</monite-app>
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.
Updated about 1 month ago