Iframe mini application

Create mini application

1. In your Publisher Account, go to the Metaframe section.
2. In the Custom sections block, click Add new app.

3. If you want the mini application to be activated immediately after creation, set the Enable toggle to active.

4. Choose Iframe as a mini application type.
5. Enter the name of the mini application. Using the checkbox, you can choose whether the name is displayed in the header of the opened mini application.
6. Enter the URL of a website or web application which will be displayed in the iframe.
7. Upload the icon that will be displayed in the Metaframe menu for this mini application.

8. Choose if a mini application should be displayed in Metaframe before or after the user is logged in.
9. Click Create app.

The created mini application can be edited or deleted.

How to configure mini application closing

If you check the Show this name in the section header box when creating a mini application, its name and close icon are displayed above the opened iframe.

If you don’‎t check the box, the logic for closing the iframe must be implemented in the mini application. To ensure the Metaframe widget processes the closing event correctly, add a script to the mini application code that sends a postMessage with the @xsolla-metaframe/mini-app:close type:

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

How to change mini application height

To match the iframe height to the mini application height, the logic for adjusting the height must be implemented in the mini application. To ensure the Metaframe widget correctly processes the height change event, add a script to the mini application code that sends a postMessage with the @xsolla-metaframe/mini-app:set-window-height type. You can also configure dynamic height adjustments when the mini application automatically sends a message whenever its height changes.

Note:

• The height of the mini application’s root element should not be defined as a percentage of the parent element’s height. You can specify the value as max-content, auto, or a fixed height, e.g., in pixels.
• The mini application must send the message whenever the height needs to be adjusted.
• The number of messages sent is unlimited.

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