Como fazer: ocultar elementos do site dentro do seu app

Às vezes, um site tem elementos que fazem sentido no navegador, mas não deveriam aparecer dentro do app. Exemplos comuns são banners pedindo para baixar o app, banners de cookies que confundem os revisores da Apple, botões de pagamento durante a revisão do app, ou a navegação do site que é substituída pelo menu do app.

Se você quiser criar um comportamento específico do app direto no seu site, você também pode detectar se o visitante está usando o app. Leia nosso guia sobre como diferenciar usuários do site e do app.

As seções a seguir falam sobre várias configurações que você pode ajustar nas suas configurações de "Personalização do site". Você pode abrir as configurações de personalização do site do seu app aqui.

Ocultar seletores de elementos

Use Seletores para ocultar elementos quando elementos específicos nunca devem ser mostrados dentro do app. Insira seletores CSS para os elementos que você quer ocultar. O app vai ocultar todos os elementos correspondentes quando seu site for exibido dentro do app.

Isso é ideal para prompts de download do app, navegação duplicada do site ou outros elementos que são úteis no site, mas desnecessários no app.

CSS para injetar

Normalmente, os Seletores para ocultar elementos são preferíveis porque funcionam mais rápido (sem "flicker" antes do CSS ser aplicado), mas você também pode usar CSS para injetar quando apenas ocultar com seletores não for suficiente e você quiser ajustar o estilo da página dentro do app. O CSS é injetado no site exibido, e você não precisa envolver em uma tag style.

.website-only-banner {
    display: none !important;
}

JavaScript para Injetar

Use JavaScript para injetar quando ocultar ou alterar elementos exigir lógica ou quando você não conseguir encontrar um bom seletor CSS. O JavaScript roda uma vez por carregamento de página após o evento DOMContentLoaded, e você não precisa envolver em uma tag script.

Aqui vai um exemplo que usa um loop para ocultar botões de login social carregados dinamicamente que a Apple não permite:

setInterval(() => {
  if (window.location.href.toLowerCase().includes("login")) {
    document.querySelectorAll("button").forEach(btn => {
      const text = btn.textContent.toLowerCase().trim();
      if (
        text.includes("sign in with google") ||
        text.includes("continue with google") ||
        text.includes("sign in with microsoft") ||
        text.includes("continue with microsoft") ||
        text.includes("sign in with facebook") ||
        text.includes("continue with facebook")
      ) {
        btn.style.display = "none";
      }
    });
  }
}, 200);

Prompt para sites criados por IA

Se o seu site foi criado com uma ferramenta de IA, você pode usar isso para te ajudar a ocultar elementos. Por exemplo, se você precisa de um jeito fácil de ocultar todos os elementos relacionados a pagamento no app, você pode dar este prompt:

Precisamos de um jeito fácil de ocultar todos os elementos relacionados a pagamento do site. Para isso, dê a todos os elementos de UI relacionados a pagamentos a classe HTML "payment". Se um elemento pai tiver a classe payment, os elementos filhos não precisam ter a classe também, já que eles serão ocultados automaticamente quando o pai for ocultado. Não implemente nenhuma lógica de ocultação; isso acontece fora do site.

Depois, adicione o seletor CSS .payment aos seus Seletores para ocultar elementos e tudo relacionado a pagamento não vai mais aparecer no app.