Explore métodos y eventos de Metaframe

Objeto window.metaframe

Una vez cargado el script, el objeto metaframe está disponible en el objeto window global de su aplicación. El objeto metaframe contiene una lista de métodos necesarios para gestionar el Metaframe en su aplicación web.

Método window.metaframe.create

Firma del método:

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

Inicia Metaframe en su aplicación web.

Método window.metaframe.setIsMobile

Firma del método:

window.metaframe.setIsMobile(isMobile: boolean)

Cambia Metaframe de la versión para ordenadores a la versión para móviles o viceversa.

objeto window.metaframe.partnerActions

El objeto contiene métodos para realizar acciones en el Metaframe.

Antes de utilizar los métodos de este objeto, debe asegurarse de que el Metaframe está completamente cargado. Para ello, suscríbase al evento de carga del Metaframe. Si el evento se ha procesado, los métodos del objeto estarán disponibles.

Ejemplo de configuración de un agente de escucha del evento de carga de Metaframe:

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

 //Here you can use partner actions

});

Método window.metaframe.partnerActions.openBackpackItemPage

Firma del método:

openBackpackItemPage: (itemId: string) => void;

Abre la página del artículo especificado en la sección Backpack.

Para que el método funcione correctamente, deben cumplirse las siguientes condiciones:

• La función Backpack está activada en Cuenta del editor.
• El usuario está autenticado en Metaframe.

Método window.metaframe.partnerActions.openLogin

Firma del método:

openLogin: () => void;

Abre el formulario de autorización de usuario. Si el usuario ya está autorizado, aparece un error en la consola del navegador.

Método window.metaframe.partnerActions.openProfile

Firma del método:

openProfile: () => void;

Abre la sección Profile del usuario actual. Si el usuario no está autorizado, aparece un error en la consola del navegador.

Método window.metaframe.partnerActions.openWallet

Firma del método:

openWallet: () => void;

Abre la sección Wallet del usuario actual. Si el usuario no está autorizado, aparece un error en la consola del navegador.

Método window.metaframe.partnerActions.openBackpack

Firma del método:

openBackpack: () => void;

Abre la sección Backpack para el usuario actual. Si el usuario no está autorizado, aparece un error en la consola del navegador.

Método window.metaframe.partnerActions.openCustomMiniApp

Firma del método:

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

Abre la sección personalizada especificada con el tipo Iframe si se cumple una de las siguientes condiciones:

• Si está activada la opción Show this app before user login en la configuración de la sección personalizada especificada y el usuario actual no está autorizado.
• Si está activada la opción Show this app after user login en la configuración de la sección personalizada especificada y el usuario actual está autorizado.

Si no se cumplen las condiciones, aparece un error en la consola del navegador.

Métodos window.metaframe.partnerActions.pushNotification

Firma del método:

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

Envía una nueva notificación a la pila de notificaciones.

Método window.metaframe.partnerActions.setIsCustomMiniAppVisible

Firma del método:

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

Muestra u oculta la sección personalizada especificada.

Eventos del widget

Puede suscribirse a los siguientes eventos de Metaframe:

Seguimiento de eventos de las secciones personalizadas

Puede añadir a Metaframe una sección personalizada con el tipo Action. Esta sección aparece como un botón que realiza una acción, como abrir una página web.

Para seguir el evento de clic en una sección personalizada, debe suscribirse al evento @metaframe:custom-action:<ACTION_ID>, en el que <ACTION_ID> es el ID de acción generado en Cuenta del editor al configurar la sección personalizada.

Ejemplo de configuración de un agente de escucha para un evento de clic en una sección personalizada:

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

 // Your code here...

})