App download banner

The download banner is a strip on your website that invites visitors using a mobile browser to install the app. It is an element of the store website, not of the app: it is added to the theme or template of your ecommerce, or to the marketing tool you already use for website notices.

This guide covers the example code and the three checks it needs: that the visitor is not already inside the app, which operating system they use, and whether they have already closed the banner.

What you need

Item	Where it comes from
App Store listing URL	Your app’s listing in App Store Connect
Google Play listing URL	Your app’s listing in Play Console

The store accounts and listings belong to you. If you do not have them yet, see Store accounts and Publish on the stores.

Checks

Do not show it inside the app

Requests coming from the app include rktwebview in the user agent. If it is present, the visitor already has the app and the banner must not appear.

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

If you have defined a custom user agent, keep %useragent% in the value or this check will stop working. See Custom User Agent.

Detect iOS or Android

It is read from the browser’s user agent. On iPadOS, Safari identifies itself as a Mac by default, so a touchscreen check is added.

const ua = navigator.userAgent;

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

On desktop neither is true and the banner is not shown.

Remember that it was closed

Store the visitor’s choice so the banner is not shown again on every page.

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

Full example

Replace the two URLs with those of your app and adapt texts and styles to your website.

<div id="app-banner" hidden>
  <button type="button" id="app-banner-close" aria-label="Close">×</button>
  <span class="app-banner__text">Download our app</span>
  <a id="app-banner-link" class="app-banner__cta" href="#">Download</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.yourcompany.yourapp';
    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>

If the banner is generated by another tool

When the banner is injected by a third-party tool rather than your own code, you cannot condition it with the check above. In that case it is hidden inside the app with CSS from the project-specific code, using the selector of the element the tool generates.

/* Replace the selector with the one used by your tool's banner */
.your-banner-selector {
  display: none !important;
}

Apple alternative

Safari on iOS offers its own Apple banner, enabled with a meta tag in the head of the website. There is no equivalent tag for Android.

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

app-id is the numeric identifier of your app on the App Store. This banner is drawn by Safari, so its style and texts cannot be customised.