Cómo: ocultar elementos del sitio web dentro de tu app

A veces, un sitio web contiene elementos que tienen sentido en un navegador, pero no deberían mostrarse dentro de la app. Ejemplos comunes son banners que piden a los usuarios descargar la app, banners de cookies que confunden a los revisores de Apple, botones de pago durante la revisión de la app, o navegación del sitio web que se reemplaza por el menú de la app.

Si querés crear un comportamiento específico para la app directamente en tu sitio web, también podés detectar si un visitante está usando la app. Leé nuestra guía sobre cómo diferenciar entre usuarios del sitio web y de la app.

Las siguientes secciones tratan varios ajustes que podés modificar en la configuración de "Personalización del sitio web". Podés abrir la configuración de personalización del sitio web de tu app acá.

Ocultar los selectores de elementos

Usá Selectores para ocultar elementos cuando ciertos elementos nunca deberían mostrarse dentro de la app. Ingresá selectores CSS para los elementos que querés ocultar. La app ocultará todos los elementos que coincidan cuando tu sitio web se muestre dentro de la app.

Esto es ideal para avisos de descarga de la app, navegación duplicada del sitio web u otros elementos que son útiles en el sitio web pero innecesarios en la app.

CSS para insertar

Normalmente, los Selectores para ocultar elementos son preferibles porque funcionan más rápido (sin parpadeo antes de que se aplique el CSS), pero también podés usar CSS para inyectar cuando los selectores de ocultación simples no alcanzan y querés ajustar el estilo de la página dentro de la app. El CSS se inyecta en el sitio web mostrado, y no necesitás envolverlo en una etiqueta style.

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

JavaScript para insertar

Usá JavaScript para inyectar cuando ocultar o cambiar elementos requiere lógica o no podés encontrar un buen selector CSS. El JavaScript se ejecuta una vez por carga de página después del evento DOMContentLoaded, y no necesitás envolverlo en una etiqueta script.

Acá tenés un ejemplo que usa un bucle para ocultar botones de inicio de sesión social cargados dinámicamente que Apple no 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 sitios web creados con IA

Si tu sitio web se creó con una herramienta de IA, podés usarla para ayudarte a ocultar elementos. Por ejemplo, si necesitás una forma fácil de ocultar todos los elementos relacionados con pagos en la app, podés darle este prompt:

Necesitamos una forma fácil de ocultar todos los elementos relacionados con pagos del sitio web. Para hacerlo, asigná a todos los elementos de la interfaz relacionados con pagos la clase HTML "payment". Si un elemento padre tiene la clase payment, sus elementos hijos no necesitan la clase también, ya que se ocultarán automáticamente cuando se oculte el padre. No implementes ninguna lógica de ocultación; esto sucede fuera del sitio web.

Después, agregá el selector CSS .payment a tus Selectores para ocultar elementos y todo lo relacionado con pagos ya no se mostrará en la app.