> This page is for version v2024-05-25 (default).
> For other versions, use one of these documentation indexes:
> - v2024-05-25 (default): https://docs.monite.com/v-2024-05-25/llms.txt
> - v2024-01-31: https://docs.monite.com/v2024-01-31/llms.txt
> - v2023-09-01: https://docs.monite.com/v2023-09-01/llms.txt

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.monite.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.monite.com/_mcp/server.

# Monite Iframe App

## Overview

The Monite Iframe App component provides a simple way to integrate Monite features into your application, ensuring smooth communication between your platform and Monite's services. This integration leverages iframe-based rendering for a secure and efficient experience.

## Available components

The Monite Iframe App offers various components that can be seamlessly integrated into your application. Below is a list of the available components:

* [`payables`](../../accounts-payable/index): Manages payable invoices and bills.
* [`receivables`](../../accounts-receivable/index): Handles receivable invoices and payment collection.
* [`counterparts`](../../common/counterparts/index): Manages information about customers, vendors, and other business partners.
* [`products`](../../accounts-receivable/products): Handles product catalog and inventory management.
* [`approval-policies`](../../accounts-payable/approvals/index): Configures approval workflows for different processes.
* [`roles`](/api/roles/get-roles): Manages user roles and permissions within the system.
* [`onboarding`](../../payments/onboarding/index)\`: Guides users through the initial setup process.

## How to implement

To implement the Monite Iframe App, follow the steps below:

### 1. Embed the iframe \[#embed]

To embed the Monite Iframe App, include an `<iframe>` element in your HTML code, specifying the desired
component in the `src` attribute. For example, to embed the `Receivables` component:

```html
<iframe
  id="monite-iframe-app"
  src="https://cdn.sandbox.monite.com/monite-iframe-app/receivables"
  width="100%"
  height="600px"
  frameborder="0"
  allow="fullscreen"
></iframe>
```

The parameters are explained below:

| Parameter     | Type     | Description                                                                                                                                    |
| ------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| `src`         | `string` | The URL of the Monite iframe source you want to embed. See [Choosing an environment](#environments) below for the sandbox and production URLs. |
| `width`       | `string` | Specifies the width of the iframe (for example, `100%`, `800px`).                                                                              |
| `height`      | `string` | Specifies the height of the iframe (for example, `600px`).                                                                                     |
| `frameborder` | `string` | Sets whether or not to display the frame border.                                                                                               |
| `allow`       | `string` | Controls permissions for the iframe (for example, `fullscreen`).                                                                               |

### 2. Establish communication \[#communication]

The Monite Iframe App uses a secure communication channel to interact with your host application. This channel facilitates the exchange of data, such as authentication tokens.

#### 2.1. Initialize the communicator \[#initialize-communicator]

To initiate the communication, use the `MoniteIframeAppCommunicator` class:

```html
<script type="module">
  import { MoniteIframeAppCommunicator } from 'https://cdn.sandbox.monite.com/monite-iframe-app-communicator.js';

  const iframeCommunicator = new MoniteIframeAppCommunicator(
    document.querySelector('#monite-iframe-app')
  );
</script>
```

#### 2.2. Mount the slots \[#mount-slots]

The `mountSlot` method sets up a communication channel for specific functionalities.

##### 2.2.1. Authentication token slot \[#auth-token-slot]

The `fetch-token` slot manages the retrieval of authentication tokens. You need to provide a function that fetches the token from your backend and returns it:

```js
iframeCommunicator.mountSlot('fetch-token', async () => {
  const res = await fetch('/my-api/monite/auth/token', {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
  });
  if (!res.ok) throw new Error('Failed to fetch token');
  return await res.json();
});
```

The function provided to the `fetch-token` slot will be invoked by the Iframe App whenever it needs to obtain an authentication token. This approach ensures secure token handling.

##### 2.2.2. Locale slot \[#locale-slot]

The `locale` slot allows you to customize the language and regional settings of the Iframe App. The interface for the
locale object is the same as for the [Drop-In Component](index)
or `<MoniteProvider />` from the React SDK:

```js
iframeCommunicator.mountSlot('locale', {
  code: 'en-US',
  currencyNumberFormat: {
    display: 'code', // the way to display currency, available options are: 'symbol' | 'code' | 'name'
    localeCode: 'en-150', // specific code to display currencies in the format you want
  },
  messages: {
    /** **/
  },
  // other locale properties similar to Drop-In component
});
```

##### 2.2.3. Theme slot \[#theme-slot]

The `theme` slot allows you to apply custom theming to the Iframe App to match your application's look and feel. The
interface for the theme object is the same as for
the [React SDK](../../sdks/react/theming):

```js
iframeCommunicator.mountSlot('theme', {
  palette: {
    // ...
  },
  typography: {
    // ...
  },
});
```

You can call `iframeCommunicator.mountSlot(...)` multiple times to modify the theme dynamically, for example, to switch
between light and dark modes:

```js
darkThemeButton.onclick = () => {
  iframeCommunicator.mountSlot('theme', {
    palette: {
      mode: 'dark',
      primary: {
        main: '#f5d14d',
        light: '#e1e1ef',
      },
      secondary: {
        main: '#707070',
      },
    },
  });
};
```

#### 2.3. Establish connection \[#establish-connection]

After mounting the necessary slots, establish a connection with the Iframe App:

```js
iframeCommunicator.connect();
```

> **Info**
>
> To disconnect the iframe and stop communication with it you can call:
>
> ```js
> iframeCommunicator.disconnect();
> ```
>
> This method might be needed when the Monite Iframe App is removed from the host page.

## Complete example

Here is a complete version of code for the implementation:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Monite Iframe App Example</title>
  </head>
  <body>
    <iframe
      id="monite-iframe-app"
      src="https://cdn.sandbox.monite.com/monite-iframe-app/receivables"
      style="border: none; width: 100%; height: 500px"
    ></iframe>

    <script type="module">
      import { MoniteIframeAppCommunicator } from 'https://cdn.sandbox.monite.com/monite-iframe-app-communicator.js';

      const iframeCommunicator = new MoniteIframeAppCommunicator(
        document.querySelector('#monite-iframe-app')
      );

      iframeCommunicator.mountSlot('fetch-token', async () => {
        const res = await fetch('/my-api/monite/auth/token', {
          method: 'POST',
          headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
          },
        });
        if (!res.ok) throw new Error('Failed to fetch token');
        return await res.json();
      });

      iframeCommunicator.mountSlot('locale', {
        code: 'en-US',
      });

      iframeCommunicator.mountSlot('theme', {
        palette: {
          primary: {
            main: '#0052cc',
          },
        },
      });

      iframeCommunicator.connect();
    </script>
  </body>
</html>
```

## Choosing an environment \[#environments]

The Monite Iframe App offers both production and sandbox environments to support development and testing.

* **Production:** Use the production environment for your live applications.

  * Iframe App URL: `https://cdn.monite.com/monite-iframe-app/{component}`
  * Communicator URL: `https://cdn.monite.com/monite-iframe-app-communicator.js`

* **Sandbox:** The sandbox environment is designed for development and testing, allowing you to experiment without impacting live data.

  * Iframe App URL: `https://cdn.sandbox.monite.com/monite-iframe-app/{component}`
  * Communicator URL: `https://cdn.sandbox.monite.com/monite-iframe-app-communicator.js`

> **Warning**
>
> Never use your production Monite account credentials for development purposes. Instead, create a separate sandbox account to test the Monite Iframe App.