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:

Copy
Full screen
Small screen
 1window.metaframe.create: (parameters: {
 2 loginProjectId: string,
 3 merchantId?: number,
 4 projectId?: number,
 5 orbsApiHostId?: string,
 6 isMobile?: boolean,
 7 isCollapsed?: boolean,
 8 layoutSettings?: {
 9     desktop: {
10       widgetMarginTop?: number,
11     },
12     mobile: {
13       widgetMarginTop?: number,
14     },
15   },
16}) => void;

Inicia Metaframe en su aplicación web.

ParámetroTipoDescripción
parameters
objectObjeto con parámetros para lanzar Metaframe.
parameters.loginProjectId
stringID de inicio de sesión. Para obtenerlo, abra Cuenta del editor y acceda a Players > Login > Dashboard > su proyecto de Login. Obligatorio.
parameters.merchantId
stringID de comerciante. Encontrará este parámetro en su Cuenta del editor:
  • en Company settings > Company.
  • en la URL de la barra de direcciones del navegador en cualquier página de Cuenta de editor. La URL tiene el siguiente formato: https:​//publisher.xsolla.com/<merchantId>/.
Obligatorio si la función Virtual currencies o Backpack está habilitada en la configuración del proyecto en la Cuenta del editor.
parameters.projectID
stringID de proyecto. Encontrará este parámetro en su Cuenta del editor junto al nombre del proyecto.
Obligatorio si la función Backpack está habilitada en la configuración del proyecto en la Cuenta del editor.
parameters.orbsApiHostId
stringID del host. Para obtenerlo, contacte con el equipo de integración enintegration@xsolla.com o con su gestor del éxito del cliente escribiendo a csm@xsolla.com y transmita el ID del proyecto y el ID del comerciante.
Obligatorio si la función Virtual currencies está habilitada en la configuración del proyecto en la Cuenta del editor.
parameters.isMobile
booleanSi Metaframe utiliza el diseño para móviles por defecto.
parameters.isCollapsed
booleanSi el widget se muestra contraído (minimizado) por defecto. El valor por defecto es true.
parameters.layoutSettings
objectObjeto con parámetros para personalizar el diseño del widget.
parameters.layoutSettings.desktop
objectObjeto con parámetros para personalizar el diseño de la versión de escritorio del widget. Obligatorio.
parameters.layoutSettings.desktop.widgetMarginTop
numberMargen superior del widget de Metaframe respecto a la ventana gráfica (en px). El valor por defecto es 16.
parameters.parameters.layoutSettings.mobile
objectObjeto con parámetros para personalizar el diseño de la versión para móviles del widget. Obligatorio.
parameters.layoutSettings.mobile.widgetMarginTop
numberMargen superior del widget de Metaframe respecto a la ventana gráfica (en px). El valor por defecto es 72.
Nota
La ubicación del widget en la versión para móviles puede configurarse en la Cuenta del editor. Encontrará más información en la sección Configurar una versión móvil.

Método window.metaframe.setIsMobile

Firma del método:

Copy
Full screen
Small screen
1window.metaframe.setIsMobile(isMobile: boolean)

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

ParámetroTipoDescripción
isMobile
booleanSi se cambia Metaframe a la versión para móviles. Si se establece como true, Metaframe cambia a la versión para móviles. Si se establece como false, Metaframe cambia a la versión para ordenadores.
Nota
La ubicación del widget en la versión para móviles puede configurarse en la Cuenta del editor. Encontrará más información en la sección Configurar una versión móvil.

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:

Copy
Full screen
Small screen
1window.addEventListener("@metaframe-partner-events:app-loaded", () => {
2
3 //Here you can use partner actions
4
5});

Método window.metaframe.partnerActions.openBackpackItemPage

Firma del método:

Copy
Full screen
Small screen
1openBackpackItemPage: (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.

ParámetroTipoDescripción
itemId
stringID interno del artículo que se transmite al llamar al método de la API para crear el artículo.

Método window.metaframe.partnerActions.openLogin

Firma del método:

Copy
Full screen
Small screen
1openLogin: () => 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:

Copy
Full screen
Small screen
1openProfile: () => 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:

Copy
Full screen
Small screen
1openWallet: () => void;

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

Nota
Para que el método funcione correctamente, la sección Wallet debe estar configurada en el widget.

Método window.metaframe.partnerActions.openBackpack

Firma del método:

Copy
Full screen
Small screen
1openBackpack: () => void;

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

Nota
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.openCustomMiniApp

Firma del método:

Copy
Full screen
Small screen
1openCustomMiniApp: (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.

Nota
Para que el método funcione correctamente, es necesario configurar una sección personalizada con el tipo Iframe en el widget. Antes de llamar al método, compruebe que el widget de Metaframe ha cargado correctamente la sección personalizada especificada. Para ello realice un seguimiento de los eventos de carga de las secciones personalizadas.
ParámetroTipoDescripción
params
objectObjeto con parámetros.
params.miniAppName
stringNombre de aplicación especificado en la configuración de la sección personalizada con el tipo Iframe. Obligatorio.

Métodos window.metaframe.partnerActions.pushNotification

Firma del método:

Copy
Full screen
Small screen
1pushNotification: (params: {
2  type: string; // use “success”, “warning”, “error” or “info”
3  text: string;
4  button?: {
5    text: string;
6    onClick: () => void;
7  };
8  durationInMs?: number;
9}) => void;

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

ParámetroTipoDescripción
params
objectObjeto con parámetros.
paramps.type
stringTipo de notificación. Valores posibles: “success”, “warning”, “error”, “info”. Obligatorio.
paramps.text
stringTexto de notificación. Obligatorio.
params.button.text
stringTexto del botón. Obligatorio.
params.button.onClick
() => voidFunción que se invoca al pulsar el botón. Obligatorio.
params.durationInMs
numberDuración de la visualización de la notificación en la pantalla en milisegundos.

Método window.metaframe.partnerActions.setIsCustomMiniAppVisible

Firma del método:

Copy
Full screen
Small screen
1setIsCustomMiniAppVisible: (params: {
2  miniAppName: string;
3  isVisible: boolean;
4}) => void;

Muestra u oculta la sección personalizada especificada.

Nota
Para que el método funcione correctamente, es necesario configurar una sección personalizada en el widget. Antes de llamar al método, compruebe que el widget de Metaframe ha cargado correctamente la sección personalizada especificada. Para ello realice un seguimiento de los eventos de carga de las secciones personalizadas.
ParámetroTipoDescripción
params
objectObjeto con parámetros.
params.miniAppName
stringNombre de aplicación especificado en la configuración de la sección personalizada. Obligatorio.
params.isVisible
booleanSi se muestra la sección personalizada especificada en el widget. Obligatorio.

Eventos del widget

Puede suscribirse a los siguientes eventos de Metaframe:

ParámetroTipo
@metaframe-partner-events:app-loadedEl evento se desencadena cuando el Metaframe se descarga correctamente después de que se haya invocado el método window.metaframe.create.
@metaframe-partner-events:not-authorized-mini-apps-loadedEl evento se activa cuando el Metaframe ha cargado correctamente las secciones personalizadas con la opción de configuración Show this app before user login activada.
@metaframe-partner-events:authorized-mini-apps-loadedEl evento se activa cuando el Metaframe ha cargado correctamente todas las secciones del widget configuradas, incluidas las secciones personalizadas con la opción de configuración Show this app after user login activada.
@metaframe-partner-events:login-successfulEste evento se desencadena cuando el usuario se conecta correctamente al Metaframe. Contiene un objeto detail con el token de autorización del usuario.
@metaframe-partner-events:logout-successfulEste evento se desencadena cuando el usuario se desconecta correctamente del sistema.
@metaframe-partner-events:mini-app-menu-button-clicked:<YOUR_MINI_APP_NAME>El evento se activa cuando un usuario hace clic en la sección personalizada de Metaframe.
@metaframe:custom-action:<ACTION_ID>El evento se desencadena cuando un usuario selecciona una sección personalizada del tipo Action en el Metaframe. Para obtener más información, consulte Seguimiento de eventos de las secciones personalizadas.

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:

Copy
Full screen
Small screen
1document.addEventListener("@metaframe:custom-action:00000000-0000-0000-0000-000000000000", () => {
2
3 // Your code here...
4
5})
¿Te ha resultado útil este artículo?
¡Gracias!
¿Hay algo en lo que podamos mejorar? Mensaje
Lo sentimos
Por favor, cuéntanos por qué no te ha resultado útil este artículo. Mensaje
¡Gracias por tu mensaje!
Nos ayudará a mejorar tu experiencia.
Última actualización: 19 de Septiembre de 2025

¿Has encontrado una errata u otro error de texto? Selecciona el texto y pulsa Ctrl+Intro.

Informar de un problema
Nos esforzamos por ofrecer contenido de calidad. Tus comentarios nos ayudan a mejorar.
Déjanos tu correo electrónico para que te podamos responder
¡Gracias por tu mensaje!
No hemos podido enviar sus comentarios
Vuelva a intentarlo más tarde o escríbanos a doc_feedback@xsolla.com.