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,

}) => void;

Initializes Metaframe in your web application. The method accepts the parameters object with the following parameters needed to run Metaframe:

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:

window.metaframe.partnerActions.openBackpackItemPage(itemId: string)

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.

Tracking events

You can subscribe to the following Metaframe events:

Tracking custom sections’ events

You can add a custom section to the Metaframe 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...

})