Explore os métodos e eventos Metaframe

Objeto window.metaframe

Quando o script é carregado, o objeto metaframe está disponível no objeto global window do seu aplicativo. O objeto metaframe contém uma lista de métodos necessários para gerenciar o Metaframe no seu aplicativo web.

Método window.metaframe.create

Método de assinatura:

window.metaframe.create: (parameters: {
 loginProjectId: string,
 merchantId?: number,
 projectId?: number,
 orbsApiHostId?: string,
 isMobile?: boolean,
 isCollapsed?: boolean,
 layoutSettings?: {
     desktop: {
       widgetMarginTop?: number,
     },
     mobile: {
       widgetMarginTop?: number,
     },
   },
}) => void;

Inicializa o Metaframe no seu aplicativo web.

Método window.metaframe.setIsMobile

Método de assinatura:

window.metaframe.setIsMobile(isMobile: boolean)

Troca o Metaframe da versão desktop para a versão móvel, ou vice-versa.

Objeto window.metaframe.partnerActions

O objeto contém métodos para acionar ações no Metaframe.

Antes de usar os métodos desse objeto, você deve garantir que o Metaframe seja totalmente carregado. Para fazer isso, inscreva-se no evento de carregamento Metafraem. Se o evento foi processado, os métodos do objeto ficarão disponíveis.

Exemplo de configuração de um ouvinte ao evento de carregamento do Metaframe:

window.addEventListener("@metaframe-partner-events:app-loaded", () => {

 //Here you can use partner actions

});

Método window.metaframe.partnerActions.openBackpackItemPage

Método de assinatura:

openBackpackItemPage: (itemId: string) => void;

Abre a página para um item especificado na seção Backpack.

Para que o método funcione corretamente, as seguintes condições devem ser cumpridas:

• A função Backpack deve estar ativada na Conta de Distribuidor.
• O usuário deve estar autenticado no Metaframe.

Método window.metaframe.partnerActions.openLogin

Método de assinatura:

openLogin: () => void;

Abre o formulário de autorização do usuário. Se o usuário já está autorizado, é exibido um erro no console do navegador.

Método window.metaframe.partnerActions.openProfile

Método de assinatura:

openProfile: () => void;

Abre seção Profile para o usuário atual. Se o usuário não for autorizado, um erro é exibido no console do navegador.

Métodos window.metaframe.partnerActions.openWallet

Método de assinatura:

openWallet: () => void;

Abre a seção Wallet para o usuário atual. Se o usuário não for autorizado, um erro é exibido no console do navegador.

Método window.metaframe.partnerActions.openBackpack

Método de assinatura:

openBackpack: () => void;

Abra a seção Backpack para o usuário atual. Se o usuário não for autorizado, um erro é exibido no console do navegador.

Método window.metaframe.partnerActions.openCustomMiniApp

Método de assinatura:

openCustomMiniApp: (params: {miniAppName: string}) => void;

Abre a seção personalizada especificada com o tipo Iframe se uma das seguintes condições for cumprida:

• Se a opção Show this app before user login estiver ativa nas configurações da seção personalizada especificada, e o usuário atual não estiver autorizado.
• Se a opção Show this app after user login estiver ativa nas configurações da seção personalizada especificada, e o usuário atual estiver autorizado.

Se as condições não forem cumpridas, é exibido um erro no console do navegador.

Métodos window.metaframe.partnerActions.pushNotification

Método de assinatura:

pushNotification: (params: {
  type: string; // use “success”, “warning”, “error” or “info”
  text: string;
  button?: {
    text: string;
    onClick: () => void;
  };
  durationInMs?: number;
}) => void;

Coloca uma nova notificação no stack de notificações.

Método window.metaframe.partnerActions.setIsCustomMiniAppVisible

Método de assinatura:

setIsCustomMiniAppVisible: (params: {
  miniAppName: string;
  isVisible: boolean;
}) => void;

Mostra ou esconde a seção personalizada especificada.

Eventos do Widget

Você pode inscrever-se nos seguintes eventos Metaframe:

Rastreamento de eventos de seções personalizadas

Você pode adicionar ao Metaframe uma seção personalizada com o tipo Action. Essa seção aparece como um botão que realiza uma ação ao ser acionado, tal como abrir um site.

Para rastrear o evento de clicar em uma seção personalizada, você precisa se inscrever ao evento @metaframe:custom-action:<ACTION_ID>, onde <ACTION_ID> é o ID de ação gerado na Conta de Distribuidor ao configurar uma seção personalizada.

Exemplo de configuração de um ouvinte para um evento de clique de seção personalizada:

document.addEventListener("@metaframe:custom-action:00000000-0000-0000-0000-000000000000", () => {

 // Your code here...

})