Мини-приложение Iframe

Создание мини-приложения

1. В вашем проекте в Личном кабинете перейдите в раздел Metaframe.
2. В блоке Пользовательские разделы нажмите Добавить новое приложение.

3. Если мини-приложение должно быть активировано сразу после его создания, установите переключатель Активировать в активное положение.

4. Выберите Iframe в качестве типа приложения.
5. Введите имя мини-приложения. С помощью флажка вы можете установить, отображать ли имя в заголовке открытого мини-приложения.
6. Введите URL-адрес сайта или веб-приложения, которые отобразятся в iframe.
7. Загрузите значок, который будет отображаться в меню Metaframe для этого приложения.

8. Выберите, когда мини-приложение должно быть доступно: до или после авторизации пользователя.
9. Нажмите Создать приложение.

Созданное мини-приложение можно изменять или удалять.

Как настроить закрытие мини-приложения

Если при создании мини-приложения вы установили флажок Отображать это название в заголовке секции, над открытым iframe будет отображаться название мини-приложения и значок для закрытия мини-приложения.

Если флажок не установлен, логика закрытия должна быть реализована на стороне мини-приложения. Чтобы виджет Metaframe корректно обработал событие закрытия, добавьте в код мини-приложения скрипт для отправки postMessage с типом @xsolla-metaframe/mini-app:close:

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

Как изменить высоту мини-приложения

Чтобы высота iframe соответствовала высоте мини-приложения, логика изменения высоты должна быть реализована на стороне мини-приложения. Чтобы виджет Metaframe корректно обработал событие изменения высоты, добавьте в код мини-приложения скрипт для отправки postMessage с типом @xsolla-metaframe/mini-app:set-window-height. Вы также можете настроить динамическое изменение высоты, чтобы мини-приложение автоматически отправляло сообщения каждый раз при изменении высоты интерфейса мини-приложения.

Обратите внимание:

• Значение высоты корневого элемента мини-приложения не должно быть указано в процентах от высоты родительского элемента. Вы можете указать значение max-content, auto или фиксированную высоту, например, в пикселях.
• Мини-приложение должно отправлять сообщение каждый раз, когда необходимо изменить высоту.
• Количество отправок неограниченно.

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