Mini-application Iframe

Créer une mini-application

1. Dans le Compte éditeur, accédez à la section Metaframe.
2. Dans le bloc Custom sections, cliquez sur Add new app.

3. Si vous souhaitez que la mini-application soit activée immédiatement après sa création, activez la bascule Enable.

4. Choisissez Iframe comme type de mini-application.
5. Entrez le nom de la mini-application. Utilisez la case à cocher pour déterminer l’affichage du nom dans l’en-tête de la mini-application ouverte.
6. Entrez l’URL d’un site Web ou d’une application Web qui s’affichera dans l’iframe.
7. Téléchargez l’icône qui s’affichera dans le menu du Metaframe pour cette mini-application.

8. Choisissez si la mini-application doit s’afficher dans Metaframe avant ou après la connexion de l’utilisateur.
9. Cliquez sur Create app.

La mini-application créée peut être modifiée ou supprimée.

Comment configurer la fermeture d'une mini-application

Si vous cochez la case Show this name in the section header lors de la création d’une mini-application, son nom et son icône de fermeture s’affichent au-dessus de l’iframe ouverte.

Si vous ne cochez pas la case, la logique de fermeture de l’iframe doit être implémentée dans la mini-application. Pour s’assurer que le widget Metaframe traite correctement l’événement de fermeture, dans le code de la mini-application, ajoutez un script qui envoie un postMessage avec le type @xsolla-metaframe/mini-app:close :

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

Comment changer la hauteur d'une mini-application

Pour ajuster la hauteur de l’iframe en fonction de celle de la mini-application, la logique d’ajustement de la hauteur doit être implémentée dans la mini-application. Pour s’assurer que le widget Metaframe traite correctement l’événement de changement de hauteur, dans le code de la mini-application, ajoutez un script qui envoie un postMessage avec le type @xsolla-metaframe/mini-app:set-window-height. Vous pouvez également configurer des ajustements dynamiques de la hauteur ; la mini-application envoie automatiquement un message chaque fois que sa hauteur change.

Note :

• La hauteur de l’élément racine de la mini-application ne doit pas être définie en pourcentage de la hauteur de l’élément parent. Vous pouvez utiliser les valeurs suivantes : max-content, auto, ou une hauteur fixe, par exemple en pixels.
• La mini-application doit envoyer un message chaque fois que la hauteur doit être ajustée.
• Le nombre de messages envoyés est illimité.

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 });