Miniaplicación Iframe

Crear una miniaplicación

1. En su Cuenta del editor, vaya a la sección Metaframe.
2. En el bloque Custom sections, haga clic en Add new app.

3. Si quiere que la miniaplicación se active inmediatamente después de crearla, active la opción Enable.

4. Elija Iframe como tipo de miniaplicación.
5. Introduzca el nombre de la miniaplicación. Puede elegir si quiere que el nombre aparezca en el encabezado de la miniaplicación abierta mediante la casilla.
6. Introduzca la URL de un sitio o aplicación web que se mostrará en el iframe.
7. Cargue el icono que aparecerá en el menú de Metaframe para esta miniaplicación.

8. Elija si una miniaplicación debe mostrarse en Metaframe antes o después de que el usuario inicie sesión.
9. Haga clic en Create app.

Se puede editar o eliminar la miniaplicación creada.

Cómo configurar el cierre de miniaplicaciones

Si marca la casilla Show this name in the section header al crear una miniaplicación, su nombre y el icono de cierre se muestran encima del iframe abierto.

Si no marca la casilla, la lógica para cerrar el iframe debe implementarse en la miniaplicación. Para asegurarse de que el widget de Metaframe procese correctamente el evento de cierre, añada un script al código de la miniaplicación que envíe un postMessage con el tipo @xsolla-metaframe/mini-app:close:

window.parent.postMessage(
  {
    type: '@xsolla-metaframe/mini-app:close',
    payload: null,
  },
  '*',
);

Cómo cambiar la altura de la miniaplicación

Para que la altura del iframe coincida con la altura de la miniaplicación, la lógica para ajustar la altura debe implementarse en la miniaplicación. Para asegurarse de que el widget de Metaframe procese correctamente el evento de cambio de altura, añada un script al código de la miniaplicación que envíe un postMessage con el tipo @xsolla-metaframe/mini-app:set-window-height. También se pueden configurar ajustes de altura dinámicos cuando la miniaplicación envía automáticamente un mensaje cada vez que cambia la altura.

Nota:

• La altura del elemento raíz de la miniaplicación no debe definirse como un porcentaje de la altura del elemento principal. Puede especificar el valor como max-content, auto o una altura fija, por ejemplo, en píxeles.
• La miniaplicación debe enviar el mensaje cada vez que sea necesario ajustar la altura.
• No hay límite de número de mensajes enviados.

const setMiniAppWindowHeight = (heightInPixels: number) => {
  window.parent.postMessage(
    {
      type: '@xsolla-metaframe/mini-app:set-window-height',
      payload: {
        heightInPixels: heightInPixels,
      },
    },
    '*',
  );
};

const handleResize = () => {
  setMiniAppWindowHeight(document.body.clientHeight);
};

handleResize();

const observer = new MutationObserver(handleResize);
observer.observe(document.body, { childList: true, subtree: true });