Explore Metaframe methods and events

window.metaframe object

Once the script is loaded, the metaframe object is available in the global window object of your application. The metaframe object contains a list of methods needed to manage the Metaframe in your web application.

window.metaframe.create method

Method signature:

window.metaframe.create: (parameters: {
 loginProjectId: string,
 merchantId?: number,
 projectId?: number,
 orbsApiHostId?: string,
 isMobile?: boolean,
 isCollapsed?: boolean,
 layoutSettings?: {
     desktop: {
       widgetMarginTop?: number,
     },
     mobile: {
       widgetMarginTop?: number,
     },
   },
}) => void;

Initializes Metaframe in your web application.

window.metaframe.setIsMobile method

Method signature:

window.metaframe.setIsMobile(isMobile: boolean)

Switches Metaframe from desktop to mobile version or vice versa.

window.metaframe.partnerActions object

The object contains methods to trigger actions in the Metaframe.

Before using the methods of this object, you must ensure that the Metaframe is fully loaded. To do this, subscribe to the Metaframe load event. If the event has been processed, the object’s methods are available.

Example of setting a listener to the Metaframe load event:

window.addEventListener("@metaframe-partner-events:app-loaded", () => {

 //Here you can use partner actions

});

window.metaframe.partnerActions.openBackpackItemPage method

Method signature:

openBackpackItemPage: (itemId: string) => void;

Opens the page for the specified item in the Backpack section.

For the method to work correctly, the following conditions must be met:

• The Backpack function is enabled in the Publisher Account.
• The user is authenticated in to Metaframe.

window.metaframe.partnerActions.openLogin method

Method signature:

openLogin: () => void;

Opens the user authorization form. If the user is already authorized, an error is displayed in the browser console.

window.metaframe.partnerActions.openProfile method

Method signature:

openProfile: () => void;

Opens the Profile section for the current user. If the user is not authorized, an error is displayed in the browser console.

window.metaframe.partnerActions.openWallet methods

Method signature:

openWallet: () => void;

Opens the Wallet section for the current user. If the user is not authorized, an error is displayed in the browser console.

window.metaframe.partnerActions.openBackpack method

Method signature:

openBackpack: () => void;

Opens the Backpack section for the current user. If the user is not authorized, an error is displayed in the browser console.

window.metaframe.partnerActions.openCustomMiniApp method

Method signature:

openCustomMiniApp: (params: {miniAppName: string}) => void;

Opens the specified custom section with the Iframe type if one of the following conditions is met:

• If the Show this app before user login toggle in the settings of the specified custom section is active, and the current user is not authorized.
• If the Show this app after user login toggle in the settings of the specified user section is active, and the current user is authorized.

If the conditions are not met, an error is displayed in the browser console.

window.metaframe.partnerActions.pushNotification methods

Method signature:

pushNotification: (params: {
  type: string; // use “success”, “warning”, “error” or “info”
  text: string;
  button?: {
    text: string;
    onClick: () => void;
  };
  durationInMs?: number;
}) => void;

Pushes a new notification to the notification stack.

window.metaframe.partnerActions.setIsCustomMiniAppVisible method

Method signature:

setIsCustomMiniAppVisible: (params: {
  miniAppName: string;
  isVisible: boolean;
}) => void;

Shows or hides the specified custom section.

Widget events

You can subscribe to the following Metaframe events:

Tracking custom sections’ events

You can add to Metaframe a custom section with the Action type. This section appears as a button that, performs an action when clicked, such as opening a website.

To track the event of clicking a custom section, you need to subscribe to the @metaframe:custom-action:<ACTION_ID> event, where <ACTION_ID> is the action ID generated in Publisher Account when setting up the custom section.

Example of setting a listener for a custom section click event:

document.addEventListener("@metaframe:custom-action:00000000-0000-0000-0000-000000000000", () => {

 // Your code here...

})