Miniaplicativo de Iframe

Criação do miniaplicativo

1. Na sua Conta de Distribuidor, acesse a seção Metaframe.
2. No bloco Custom sections, clique em Add new app.

3. Se você quiser que o miniaplicativo seja ativado imediatamente após a criação, defina a opção Enable como ativada.

4. Escolha Iframe como tipo de miniaplicativo.
5. Insira o nome do miniaplicativo. Usando a caixa de seleção, você pode escolher se o nome é exibido no cabeçalho do miniaplicativo aberto.
6. Insira o URL de um website ou aplicativo da web que será exibido no iframe.
7. Envie o ícone que será exibido no menu Metaframe para esse miniaplicativo.

8. Escolha se um miniaplicativo deve ser exibido no Metaframe antes ou depois do usuário acessar sua conta.
9. Clique em Create app.

O miniaplicativo criado pode ser editado ou excluído.

Como configurar o fechamento do miniaplicativo

Se você marcar a caixa Show this name in the section header ao criar o miniaplicativo, seu nome e ícone de encerramento serão exibidos acima do iframe aberto.

Se você não marcar a caixa, a lógica para fechar o iframe deve ser implementada no miniaplicativo. Para garantir que o widget Metaframe processe o evento de encerramento corretamente, adicione um script ao código do miniaplicativo que envia uma postMessage com o tipo @xsolla-metaframe/mini-app:close:

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

Como alterar a altura do miniaplicativo

Para equiparar a altura do iframe à altura do miniaplicativo, a lógica para ajustar a altura deve ser implementada no miniaplicativo. Para garantir que o widget Metaframe processe o evento de alteração de altura corretamente, adicione um script ao código do miniaplicativo que envia uma postMessage com o tipo @xsolla-metaframe/mini-app:set-window-height. Você também pode configurar ajustes de altura dinâmicos quando o miniaplicativo envia uma mensagem automaticamente sempre que a altura muda.

Observação:

• A altura do elemento raiz do miniaplicativo não deve ser definida como percentual da altura do elemento pai. Você pode especificar o valor como max-content, auto ou uma altura fixa (em píxeis).
• O miniaplicativo deve enviar a mensagem sempre que a altura precisar ser ajustada.
• A quantidade de mensagens enviada é ilimitada.

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