Banner de descarga de la app

El banner de descarga es una franja en tu web que invita a instalar la app a quien la visita desde el navegador del móvil. Es un elemento de la web de la tienda, no de la app: se añade en el tema o la plantilla de tu ecommerce, o en la herramienta de marketing que ya uses para los avisos de la web.

Esta guía recoge el código de ejemplo y las tres comprobaciones que necesita: que el visitante no esté ya dentro de la app, qué sistema operativo usa y si ya cerró el banner.

Qué necesitas

Dato	De dónde sale
URL de la ficha en App Store	Ficha de tu app en App Store Connect
URL de la ficha en Google Play	Ficha de tu app en Play Console

Las cuentas de store y las fichas son tuyas. Si aún no las tienes, ver Cuentas de store y Publicar en las stores.

Comprobaciones

No mostrarlo dentro de la app

Las peticiones que salen de la app incluyen rktwebview en el user agent. Si lo contiene, el visitante ya tiene la app y el banner no debe aparecer.

const isReskytApp = navigator.userAgent.includes('rktwebview');

Si has definido un user agent propio, conserva %useragent% en el valor o esta comprobación dejará de funcionar. Ver Custom User Agent.

Detectar iOS o Android

Se lee del user agent del navegador. En iPadOS, Safari se identifica por defecto como un Mac, por lo que se añade una comprobación de pantalla táctil.

const ua = navigator.userAgent;

const isAndroid = /Android/i.test(ua);
const isIOS =
  /iPhone|iPad|iPod/i.test(ua) ||
  (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);

En escritorio ninguna de las dos es verdadera y el banner no se muestra.

Recordar que se ha cerrado

Guarda la decisión del visitante para no volver a mostrarlo en cada página.

const KEY = 'rk_app_banner_closed';
const closed = localStorage.getItem(KEY) === '1';

Ejemplo completo

Sustituye las dos URLs por las de tu app y adapta textos y estilos a tu web.

<div id="app-banner" hidden>
  <button type="button" id="app-banner-close" aria-label="Cerrar">×</button>
  <span class="app-banner__text">Descarga nuestra app</span>
  <a id="app-banner-link" class="app-banner__cta" href="#">Descargar</a>
</div>

<style>
  #app-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: #f4f4f4;
    border-bottom: 1px solid #ddd;
    font: 14px/1.3 system-ui, sans-serif;
  }
  #app-banner[hidden] { display: none; }
  #app-banner button {
    border: 0;
    background: none;
    font-size: 20px;
    cursor: pointer;
  }
  .app-banner__text { flex: 1; }
  .app-banner__cta {
    padding: 6px 14px;
    border-radius: 6px;
    background: #111;
    color: #fff;
    text-decoration: none;
  }
</style>

<script>
  (function () {
    var APP_STORE_URL = 'https://apps.apple.com/app/idXXXXXXXXXX';
    var PLAY_STORE_URL = 'https://play.google.com/store/apps/details?id=com.tuempresa.tuapp';
    var KEY = 'rk_app_banner_closed';

    var ua = navigator.userAgent;
    var isReskytApp = ua.includes('rktwebview');
    var isAndroid = /Android/i.test(ua);
    var isIOS =
      /iPhone|iPad|iPod/i.test(ua) ||
      (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);

    var closed = false;
    try { closed = localStorage.getItem(KEY) === '1'; } catch (e) {}

    if (isReskytApp || closed || (!isAndroid && !isIOS)) return;

    var banner = document.getElementById('app-banner');
    var link = document.getElementById('app-banner-link');
    link.href = isIOS ? APP_STORE_URL : PLAY_STORE_URL;
    banner.hidden = false;

    document.getElementById('app-banner-close').addEventListener('click', function () {
      banner.hidden = true;
      try { localStorage.setItem(KEY, '1'); } catch (e) {}
    });
  })();
</script>

Si el banner lo genera otra herramienta

Cuando el banner lo inyecta una herramienta de terceros y no tu propio código, no puedes condicionarlo con la comprobación anterior. En ese caso se oculta dentro de la app con CSS desde el código específico del proyecto, usando el selector del elemento que genera la herramienta.

/* Sustituye el selector por el del banner de tu herramienta */
.selector-del-banner {
  display: none !important;
}

Alternativa de Apple

Safari en iOS ofrece un banner propio de Apple que se activa con una etiqueta meta en el head de la web. No existe una etiqueta equivalente para Android.

<meta name="apple-itunes-app" content="app-id=XXXXXXXXXX">

app-id es el identificador numérico de tu app en App Store. Este banner lo dibuja Safari, así que no admite personalización de estilo ni de textos.