Extensions

Extensions in Manager.io are custom web applications that run inside the Manager interface using an embedded IFRAME. They allow developers to build tailored functionality—such as data visualizations, automation tools, or integrations—without modifying the core Manager software.

When loaded, Manager passes a context object to the extension using the postMessage API. This context contains everything the extension needs to interact with the Manager API, including:

the API endpoint,
a scoped access token, and
information about the current page in Manager.

Extensions can then use this context to make authenticated API calls, display business data, or provide interactive tools directly within the Manager UI. Each extension is tied to a specific page in Manager (like Customers or Sales Invoice), and is configured through the Extensions screen under Settings.

Sample Extension

Here is the minimal extension for Manager.io:

<html>
  <body>
  <h1>Sample Extension</h1>
  <script>
    window.addEventListener("message", (event) => {
      window.managerAppContext = event.data;
    });
  </script>
  </body>
</html>

The script above listens for a postMessage event from Manager. When the extension is loaded in an IFRAME, Manager will send a context object. This object will be stored in the window.managerAppContext variable.

How to Load Extension in Manager

To embed extension in Manager.io:

Open your business in Manager.
Go to the Settings tab.
Select Extensions.
Click the New Extension button.
Fill out the form:
- Name – e.g. Sample Extension
- Endpoint – URL where your extension is hosted (e.g. https://extensions.manager.io/example)
- Placement – relative URL of where the IFRAME should appear. For example, to inject into Bank and Cash Accounts, enter /bank-and-cash-accounts
Click Create.
Navigate to the Bank and Cash Accounts tab.
Scroll to the bottom — you'll see a box titled Sample Extension.
Click the box to expand it. The IFRAME will load and receive context from Manager.

What's in the Context?

The managerAppContext contains:

apiEndpoint – Base URL for the Manager API
apiAccessToken – Bearer token scoped to the logged-in user and selected business
pageParameters – Parameters related to the current page (e.g., Business, Key)

What to Do Next

Once you have the context, you can make API calls like this:

fetch("${window.managerAppContext.apiEndpoint}/customers", {
    method: "GET",
    headers: {
        "Authorization": "Bearer ${window.managerAppContext.apiAccessToken}"
    }
})
.then(response => response.json())
.then(data => {
    // Do something with the data
});

Use the API to read or write data. Remember:

The access token is short-lived.
It reflects the permissions of the currently logged-in user.
All actions are scoped to the selected business.