Методы и события Metaframe

Объект window.metaframe

После загрузки скрипта объект metaframe будет доступен в глобальном объекте window вашего приложения. Объект metaframe содержит список методов, необходимых для управления Metaframe в вашем веб-приложении.

Метод window.metaframe.create

Сигнатура метода:

Copy
Full screen
Small screen
 1window.metaframe.create: (parameters: {
 2 loginProjectId: string,
 3 merchantId?: number,
 4 projectId?: number,
 5 orbsApiHostId?: string,
 6 isMobile?: boolean,
 7 isCollapsed?: boolean,
 8 layoutSettings?: {
 9     desktop: {
10       widgetMarginTop?: number,
11     },
12     mobile: {
13       widgetMarginTop?: number,
14     },
15   },
16}) => void;

Инициализирует Metaframe в вашем веб-приложении.

ПараметрТипОписание
parameters
objectОбъект с параметрами для запуска Metaframe.
parameters.loginProjectId
stringID варианта авторизации. Чтобы получить его, откройте проект в Личном кабинете, перейдите в раздел Игроки > Авторизация > Дашборд > проект авторизации. Обязательный.
parameters.merchantId
stringID продавца. Вы можете найти этот параметр в Личном кабинете:
  • В разделе Настройки компании > Компания.
  • Адресной строке браузера на любой странице Личного кабинета. URL-адрес имеет вид https:​//publisher.xsolla.com/<merchantId>/.
Обязательный, если в настройках проекта в Личном кабинете активирована функция Виртуальные валюты или Рюкзак.
parameters.projectID
stringID проекта. Вы можете найти этот параметр в Личном кабинете рядом с названием проекта.
Обязательный, если в настройках проекта в Личном кабинете активирована функция Рюкзак.
parameters.orbsApiHostId
stringID хоста. Для его получения обратитесь к команде интеграции через integration@xsolla.com или к персональному менеджеру проекта через csm@xsolla.com и передайте ID проекта и ID продавца.
Обязательный, если в настройках проекта в Личном кабинете активирована функция Виртуальные валюты.
parameters.isMobile
booleanИспользует ли Metaframe мобильную версию по умолчанию.
parameters.isCollapsed
booleanОтображается ли виджет в свернутом (минимизированном) виде по умолчанию. Значение по умолчанию — true.
parameters.layoutSettings
objectОбъект с параметрами для настройки верстки виджета.
parameters.layoutSettings.desktop
objectОбъект с параметрами для настройки верстки настольной версии виджета. Обязательный.
parameters.layoutSettings.desktop.widgetMarginTop
numberВерхний отступ для виджета Metaframe относительно области просмотра (в px). Значение по умолчанию — 16.
parameters.parameters.layoutSettings.mobile
objectОбъект с параметрами для настройки верстки мобильной версии виджета. Обязательный.
parameters.layoutSettings.mobile.widgetMarginTop
numberВерхний отступ для виджета Metaframe относительно области просмотра (в px). Значение по умолчанию — 72.
Примечание
Расположение виджета в мобильной версии можно настроить в Личном кабинете. Подробные сведения приведены в разделе Настройка мобильной версии.

Метод window.metaframe.setIsMobile

Сигнатура метода:

Copy
Full screen
Small screen
1window.metaframe.setIsMobile(isMobile: boolean)

Переключает Metaframe с настольной на мобильную версию или наоборот.

ПараметрТипОписание
isMobile
booleanСледует ли переключать Metaframe на мобильную версию. Если установлено значение true, то Metaframe переключится на мобильную версию. Если установлено значение false, то Metaframe переключится на настольную версию.
Примечание
Расположение виджета в мобильной версии можно настроить в Личном кабинете. Подробные сведения приведены в разделе Настройка мобильной версии.

Объект window.metaframe.partnerActions

Объект содержит методы для инициирования действий в Metaframe.

Перед использованием методов этого объекта необходимо убедиться, что Metaframe полностью загружен. Для этого необходимо подписаться на событие загрузки Metaframe. Если событие было обработано, то методы объекта доступны.

Пример установки слушателя на событие загрузки Metaframe:

Copy
Full screen
Small screen
1window.addEventListener("@metaframe-partner-events:app-loaded", () => {
2
3 //Here you can use partner actions
4
5});

Метод window.metaframe.partnerActions.openBackpackItemPage

Сигнатура метода:

Copy
Full screen
Small screen
1openBackpackItemPage: (itemId: string) => void;

Открывает страницу указанного товара в разделе Backpack.

Для корректной работы метода необходимо соблюдение следующих условий:

  • В Личном кабинете активирована функция Рюкзак.
  • Пользователь авторизовался в Metaframe.

ПараметрТипОписание
itemId
stringВнутренний ID предмета, который передается при вызове метода API на создание предмета.

Метод window.metaframe.partnerActions.openLogin

Сигнатура метода:

Copy
Full screen
Small screen
1openLogin: () => void;

Открывает форму авторизации пользователя. Если пользователь уже авторизован, в браузерную консоль выводится ошибка.

Метод window.metaframe.partnerActions.openProfile

Сигнатура метода:

Copy
Full screen
Small screen
1openProfile: () => void;

Открывает раздел Profile. Если пользователь не авторизован, в браузерную консоль выводится ошибка.

Метод window.metaframe.partnerActions.openWallet

Сигнатура метода:

Copy
Full screen
Small screen
1openWallet: () => void;

Открывает раздел Wallet. Если пользователь не авторизован, в браузерную консоль выводится ошибка.

Примечание
Для корректной работы метода в виджете должен быть настроен раздел Wallet.

Метод window.metaframe.partnerActions.openBackpack

Сигнатура метода:

Copy
Full screen
Small screen
1openBackpack: () => void;

Открывает раздел Backpack. Если пользователь не авторизован, в браузерную консоль выводится ошибка.

Примечание
Для корректной работы метода необходимо соблюдение следующих условий:
  • В Личном кабинете активирована функция Рюкзак.
  • Пользователь авторизовался в Metaframe.

Метод window.metaframe.partnerActions.openCustomMiniApp

Сигнатура метода:

Copy
Full screen
Small screen
1openCustomMiniApp: (params: {miniAppName: string}) => void;

Открывает указанный пользовательский раздел с типом Iframe при соблюдении одного из следующих условий:

  • Если в настройках указанного пользовательского раздела переключатель Показывать это приложение перед авторизацией пользователя установлен в активное приложение и текущий пользователь не авторизован.
  • Если в настройках указанного пользовательского раздела переключатель Показывать это приложение после авторизации пользователя установлен в активное приложение и текущий пользователь авторизован.

Если условия не выполняются, в браузерную консоль выводится ошибка.

Примечание
Для корректной работы метода в виджете должен быть настроен пользовательский раздел с типом Iframe. Перед вызовом метода проверьте, что виджет Metaframe успешно загрузил указанный пользовательский раздел. Для этого отслеживайте события загрузки пользовательских разделов.
ПараметрТипОписание
params
objectОбъект с параметрами.
params.miniAppName
stringИмя приложения, указанное в настройках пользовательского раздела с типом Iframe. Обязательный.

Метод window.metaframe.partnerActions.pushNotification

Сигнатура метода:

Copy
Full screen
Small screen
1pushNotification: (params: {
2  type: string; // use “success”, “warning”, “error” or “info”
3  text: string;
4  button?: {
5    text: string;
6    onClick: () => void;
7  };
8  durationInMs?: number;
9}) => void;

Помещает новое уведомление в очередь.

ПараметрТипОписание
params
objectОбъект с параметрами.
paramps.type
stringТип уведомления. Возможные значения: “success”, “warning”, “error”, “info”. Обязательный.
paramps.text
stringТекст уведомления. Обязательный.
params.button.text
stringТекст кнопки. Обязательный.
params.button.onClick
() => voidФункция, которая вызывается при нажатии на кнопку. Обязательный.
params.durationInMs
numberВремя отображения уведомления на экране (в миллисекундах).

Метод window.metaframe.partnerActions.setIsCustomMiniAppVisible

Сигнатура метода:

Copy
Full screen
Small screen
1setIsCustomMiniAppVisible: (params: {
2  miniAppName: string;
3  isVisible: boolean;
4}) => void;

Отображает или скрывает указанный пользовательский раздел.

Примечание
Для корректной работы метода в виджете должен быть настроен пользовательский раздел. Перед вызовом метода проверьте, что виджет Metaframe успешно загрузил указанный пользовательский раздел. Для этого отслеживайте события загрузки пользовательских разделов.
ПараметрТипОписание
params
objectОбъект с параметрами.
params.miniAppName
stringИмя приложения, указанное в настройках пользовательского раздела. Обязательный.
params.isVisible
booleanОтображать ли указанный пользовательский раздел в виджете. Обязательный.

События виджета

Вы можете подписаться на следующие события Metaframe:

ПараметрТип
@metaframe-partner-events:app-loadedСобытие срабатывает при успешной загрузке Metaframe после вызова метода window.metaframe.create.
@metaframe-partner-events:not-authorized-mini-apps-loadedСобытие срабатывает при успешной загрузке пользовательских разделов, в настройках которых переключатель Показывать это приложение перед авторизацией пользователя установлен в активное приложение.
@metaframe-partner-events:authorized-mini-apps-loadedСобытие срабатывает при успешной загрузке настроенных разделов виджета, в том числе пользовательских разделов, в настройках которых переключатель Показывать это приложение после авторизации пользователя установлен в активное приложение.
@metaframe-partner-events:login-successfulСобытие срабатывает при успешной авторизации пользователя в Metaframe и содержит объект detail с авторизационным токеном пользователя.
@metaframe-partner-events:logout-successfulСобытие срабатывает при успешном выходе пользователя из системы.
@metaframe-partner-events:mini-app-menu-button-clicked:<YOUR_MINI_APP_NAME>Событие срабатывает, если пользователь выбирает в Metaframe пользовательский раздел.
@metaframe:custom-action:<ACTION_ID>Событие срабатывает, если пользователь выбирает в Metaframe пользовательский раздел с типом Действие. Подробные сведения приведены в разделе Отслеживание событий пользовательских разделов.

Отслеживание событий пользовательских разделов

Вы можете добавить в Metaframe пользовательский раздел с типом Action. Такой раздел отображается в виде кнопки, при нажатии на которую совершается действие, например, переход на веб-сайт.

Для отслеживания события выбора пользовательского раздела вам требуется подписаться на событие @metaframe:custom-action:<ACTION_ID>, гдe <ACTION_ID> — ID действия, сформированный в Личном кабинете при настройке пользовательского раздела.

Пример установки слушателя на событие выбора пользовательского раздела:

Copy
Full screen
Small screen
1document.addEventListener("@metaframe:custom-action:00000000-0000-0000-0000-000000000000", () => {
2
3 // Your code here...
4
5})
Была ли статья полезна?
Спасибо!
Что может сделать страницу еще лучше? Сообщение
Жаль, что так произошло
Расскажите, почему статья не была полезна. Сообщение
Спасибо за обратную связь!
Ваши мысли и идеи помогут нам улучшить ваш пользовательский опыт.
Последнее обновление: 19 сентября 2025

Нашли опечатку или ошибку в тексте? Выделите ее и нажмите Ctrl+Enter.

Сообщите о проблеме
Мы постоянно улучшаем качество нашей документации. Ваш отзыв поможет нам в этом.
Укажите email-адрес, чтобы мы могли связаться с вами
Спасибо за обратную связь!
Не получилось отправить ваш комментарий
Попробуйте еще раз позже или напишите нам на doc_feedback@xsolla.com.