Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

App Download Redirect Guide

This snippet detects if a visitor is on iOS or Android and automatically redirects them to the correct app store, using the ?android= and ?ios= URL parameters.

How it Works

Add your app store links as URL parameters:

<https://yourdomain.com/redirect.html?android=https://play.google.com&ios=https://apps.apple.com/>

🚀 Option 1: Automatic Redirect (JavaScript Only)

Best for: Users should be taken to the correct store instantly, without seeing any message or UI.

How to use:

  • Paste the JavaScript snippet (see below) right before </body> on your page.
  • That’s it — users are redirected as soon as they land on the page.

✨ Option 2: User-Friendly UI (HTML + CSS + JavaScript)

Best for: You want to show a “Redirecting…” message, and if the redirect fails, display download badges (buttons) for each store.

How to use:

  • Add the HTML + CSS snippet inside your <body>, near the top of your page.
  • Add the JavaScript snippet right before </body>.
  • Users will see a loading message. If the redirect fails (or links are missing), fallback download badges are shown.

⚙️ JavaScript Snippet (Required for Both Options)

Paste at the end of your page, before </body>:

1<script>
2function getMobileOS() {
3  const userAgent = navigator.userAgent.toLowerCase();
4  if (/windows phone/i.test(userAgent)) return "windows";
5  if (/android/i.test(userAgent)) return "android";
6  if (/ipad|iphone|ipod/.test(userAgent) && !window.MSStream) return "ios";
7  return "desktop";
8}
9
10document.addEventListener("DOMContentLoaded", function() {
11  const urlParams = new URLSearchParams(window.location.search);
12  const iosUrl = urlParams.get('ios');
13  const androidUrl = urlParams.get('android');
14  const platform = getMobileOS();
15
16  const downloadMsg = document.getElementById("downloadMsg");
17  const redirectingMsg = document.getElementById("redirectingMsg");
18  const errorMsg = document.getElementById("errorMsg");
19  const iosBadge = document.getElementById("iosBadge");
20  const androidBadge = document.getElementById("androidBadge");
21  const isValidUrl = url => /^https?:\/\//.test(url);
22
23  function showBadges() {
24    if (![iosUrl, androidUrl].some(isValidUrl)) {
25      errorMsg?.classList.remove('hidden');
26      redirectingMsg?.classList.add('hidden');
27      return;
28    }
29    redirectingMsg?.classList.add('hidden');
30    downloadMsg?.classList.remove('hidden');
31    if (isValidUrl(iosUrl)) {
32      iosBadge?.classList.remove("hidden");
33      iosBadge.href = iosUrl;
34    }
35    if (isValidUrl(androidUrl)) {
36      androidBadge?.classList.remove("hidden");
37      androidBadge.href = androidUrl;
38    }
39  }
40
41  if (platform === "android" && isValidUrl(androidUrl)) {
42    window.location.href = androidUrl;
43  } else if (platform === "ios" && isValidUrl(iosUrl)) {
44    window.location.href = iosUrl;
45  } else {
46    showBadges();
47  }
48});
49</script>

🧩 HTML + Minified CSS (Only for Option 2)

Paste before the JavaScript snippet.

This shows the UI for “Redirecting…” and fallback badges.

1<style>html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}a,a:visited,a:active{color:unset;text-decoration:none}.loader{width:35px;height:35px;border:5px solid #047857;border-bottom-color:transparent;border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}html{overflow:hidden}.wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;padding:1em;background-color:#f0f0f0;overflow:hidden}.content{text-align:center}.content h2{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;margin:1em;font-weight:500;color:#222}.hidden{display:none !important}.iconMsg{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:1rem;color:#222;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif}.iconMsg h2{font-size:1.2rem;font-weight:600}.badges{margin-top:16px}.badges a{display:block;margin-bottom:0.8em;font-weight:500}#iconMsg .download-icon path{fill:#047857}.ml-button{border-radius:10px;padding:1em 2em;background-color:black;color:white !important;width:100%}</style>
2
3<div class="wrapper">
4  <div class="content" id="redirectingMsg">
5    <h2>Redirecting...</h2>
6    <span class="loader"></span>
7  </div>
8
9  <div id="downloadMsg" class="iconMsg hidden">
10    <svg class="download-icon" width="20" height="20" viewBox="0 0 24 24"><path d="M7.70711 10.2929L11 13.5858V3a1 1 0 0 1 2 0v10.5858l3.2929-3.2929a1 1 0 1 1 1.4142 1.4142l-5 5a1 1 0 0 1-1.4142 0l-5-5a1 1 0 0 1 1.4142-1.4142Z" fill="#000"/><path d="M4 22a1 1 0 0 1 0-2h16a1 1 0 0 1 0 2H4Z" fill="#000"/></svg>
11    <h2>Download Now</h2>
12    <p>Get the app from available stores</p>
13    <div class="badges">
14      <a class="hidden" id="androidBadge" href=""><img src="https://upload.wikimedia.org/wikipedia/commons/7/78/Google_Play_Store_badge_EN.svg" width="120"></a>
15      <a class="hidden" id="iosBadge" href=""><img src="https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg" width="120"></a>
16    </div>
17  </div>
18
19  <div id="errorMsg" class="iconMsg hidden">
20    <svg width="20" height="20" fill="#047857" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>
21    <p>There was an error while trying to redirect</p>
22  </div>
23</div>
24