Iframe-Minianwendung

Minianwendung erstellen

1. Navigieren Sie im Kundenportal zum Menüpunkt Metaframe.
2. Klicken Sie im Block Benutzerdefinierte Abschnitte auf Neue App hinzufügen.

3. Damit die Minianwendung sofort nach der Erstellung aktiviert wird, müssen Sie den Schalter Aktivieren anklicken.

4. Wählen Sie die Option Mini als Minianwendungstyp aus.
5. Vergeben Sie einen Namen für die Minianwendung. Anhand des Kontrollkästchens lässt sich steuern, ob der Name im Header der geöffneten Minianwendung angezeigt werden soll.
6. Geben Sie die URL einer Website oder Webanwendung ein, die im iframe angezeigt werden soll.
7. Laden Sie das Symbol hoch, das im Metaframe-Menü für diese Minianwendung angezeigt werden soll.

8. Legen Sie fest, ob die Minianwendung im Metaframe angezeigt werden soll, bevor oder nachdem sich der Nutzer angemeldet hat.
9. Klicken Sie auf App erstellen.

Die erstellte Minianwendung kann bearbeitet oder gelöscht werden.

So konfigurieren Sie das Schließen der Minianwendung

Wenn Sie beim Erstellen einer Minianwendung das Kontrollkästchen Diesen Namen im Header anzeigen aktivieren, werden der Name und das Schließen-Symbol über dem geöffneten iframe angezeigt.

Wenn Sie das Kontrollkästchen nicht aktivieren, muss die Logik zum Schließen des iframe in der Minianwendung implementiert sein. Damit das Metaframe-Widget das Ereignis, die Minianwendung zu schließen, ordnungsgemäß verarbeitet, müssen Sie den Code der Minianwendung um ein Skript ergänzen, das eine postMessage vom Typ @xsolla-metaframe/mini-app:close sendet:

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

So ändern Sie die Höhe der Minianwendung

Um die Höhe des iframes an die Höhe der Minianwendung anzugleichen, muss die Logik zur Höhenanpassung in der Minianwendung implementiert sein. Damit das Metaframe-Widget das Ereignis, die Höhe anzugleichen, ordnungsgemäß verarbeitet, müssen Sie den Code der Minianwendung um ein Skript ergänzen, das eine postMessage vom Typ @xsolla-metaframe/mini-app:set-window-height sendet. Sie können auch festlegen, dass die Höhe dynamisch angepasst wird. In diesem Fall sendet die Minianwendung bei jeder Höhenänderung automatisch eine Nachricht.

Hinweis:

• Die Höhe des Stammelements der Minianwendung sollte nicht als Prozentsatz der Höhe des übergeordneten Elements definiert sein. Sie können max-content oder auto als Wert festlegen oder eine feste Höhe (z. B. in Pixeln) angeben.
• Die Minianwendung muss eine Nachricht senden, wenn die Höhe angepasst werden muss.
• Es können unbegrenzt viele Nachrichten gesendet werden.

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