“Download our App” notification on mobile devices

Question

Can someone please enlighten me how those notifications work? I was searching some infos about it but no luck. Don't know if I name it right. On some pages there is this popup to download site's mobile application. It contains X close button and Download App button. For iOS devices it always looks the same, so I figured it's not custom made. Does it come somehow from app store?

Here is the picture: http://oi60.tinypic.com/2dmhymc.jpg

Answer 1

This is called a "Smart App Banner" and can easily be added to your site using an extra meta tag:

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

You can include three comma-separated parameters in the content attribute:

app-id _Required

Your app's unique identifier. To find your app ID from the iTunes Link Maker, type the name of your app in the Search field, and select the appropriate country and media type. In the results, find your app and select iPhone App Link in the column on the right. Your app ID is the nine-digit number in between id and ?mt.

affiliate-data _Optional

Your iTunes affiliate string, if you are an iTunes affiliate. If you are not, find out more about becoming an iTunes affiliate at http://www.apple.com/itunes/affiliates/.

app-argument _Optional

A URL that provides context to your native app. If you include this, and the user has your app installed, she can jump from your website to the corresponding position in your iOS app. Typically, it is beneficial to retain navigational context because: If the user is deep within the navigational hierarchy of your website, you can pass the document’s entire URL, and then parse it in your app to reroute her to the correct location in your app. If the user performs a search on your website, you can pass the query string so that she can seamlessly continue the search in your app without having to retype her query. If the user is in the midst of creating content, you can pass the session ID to download the web session state in your app so she can nondestructively resume her work. You can generate the app-argument of each page dynamically with a server-side script. You can format it however you'd like, as long as it is a valid URL.

Note: You cannot display Smart App Banners inside of a frame. Banners won’t appear in the iOS Simulator.

Source and more info

Answer 2

Here is a styled dropdown banner that I designed that detects mobile platforms.

HTML

<div id="note">
<p>It is recommended that you use landscape mode for a better experience (Turn your phone sideways).</p>     
<a id="close">[Dismiss]</a>

Javascript

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {
document.getElementById("note").style.visibility = "block";}

 close = document.getElementById("close");
 close.addEventListener('click', function() {
   note = document.getElementById("note");
   note.style.display = 'none';
 }, false);

CSS

#note {
visibility: hidden;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
color: white;
position: absolute;
z-index: 101;
top: 0;
left: 0;
right: 0;
background: #000000;
text-align: center;
line-height: 2.5;
overflow: hidden; 
-webkit-box-shadow: 0 0 5px black;
-moz-box-shadow:    0 0 5px black;
box-shadow:         0 0 5px black;}

@-webkit-keyframes slideDown {
0%, 100% { -webkit-transform: translateY(-50px); }
10%, 90% { -webkit-transform: translateY(0px); }}
@-moz-keyframes slideDown {
0%, 100% { -moz-transform: translateY(-50px); }
10%, 90% { -moz-transform: translateY(0px); }}

.cssanimations.csstransforms #note {
-webkit-transform: translateY(-50px);
-webkit-animation: slideDown 2.5s 1.0s 1 ease forwards;
-moz-transform:    translateY(-50px);
-moz-animation:    slideDown 2.5s 1.0s 1 ease forwards;}

.cssanimations.csstransforms #close {
 display: none;}