Drop-in quick start
Get started with Monite's Drop-in web component.
Overview
The fastest 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. Open your web app or create a new one
If you already have a web application, open it in your favourite IDE.
Alternatively, you can create a new app from scratch using one of the popular bootstrapping frameworks. For example, create an empty React application using create-react-app:
Then you can open this folder in VS Code, explore its source code or type npm start
in a terminal to see the app in action.
2. Add monite to your app
The fastest way to add monite to your app is to download monite-app.js
from a CDN. Doing this requires no “build step”, as the process does not require module bundlers.
For this, locate the index.html
file in your web app folder and include the following script
tag within your HTML file’s body
:
Alternatively, you can also 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:
HTML
React.js
3. Embed 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.
Add the monite-app
element to your application and include the required attributes:
HTML
React.js
Here, the basename
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.
4: 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 and add it to the <script slot="fetch-token">
of the monite-app
.
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.
5: Review the code
Finally, you can compare your resulting code with our template to make sure that everything is correct:
HTML (npm)
HTML (CDN)
React.js
(Optional) Add theming
You can customize the theme of the monite-app
component. To include theming, define the object that describes the custom themes within a script
tag in your file. The script
tag that contains your custom theme is assigned an slot
attribute with a value of theme
as shown:
For more information on customizing Monite Drop-in UI, see Theming and customization.
Next, insert the script
into in the monite-app
element as shown:
(Optional) Add localization
You can customize the locale of the monite-app
component renderings. To include localization, define the object that describes the localization within a script
tag in your file. The script
tag that contains your custom theme is assigned an slot
attribute with a value of locale
:
The currencyLocale
property must adhere to the BCP-47 language tag standard. For more information on including localization in Monite’s Drop-in library, see Localization.
Next, insert the script
into in the monite-app
element as shown:
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.