When you visit your favorite websites on your mobile devices, you may sometimes notice a banner floating at the top of the page displaying the site’s native mobile app.

 

    

In mobile Safari on iOS 6 and later, a feature called Smart App Banner provides the capability of displaying a banner for your native iOS app at the top of your website. When the banner is being tapped on, it either opens the native app on the user’s iOS device, or takes the user to the App Store to view the app.

 

 

To enable this feature for your website, simply add the following meta tag in the head of each page where you want the banner to be displayed:

 

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

The app-argument attribute can be omitted if all you want is to open the native app when the user taps on the banner.

 

If you are passing the URL to your native app so that user can jump to the corresponding position in your app, implement the application:openURL:sourceApplication:annotation: method in your app delegate, which is fired when your app is launched from a URL. 

 

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation

 

Provide logic in the above method to interpret the URL that you pass, and then take the user to the corresponding position in your native app based on the URL.

 

 

if ( /(iPad).*AppleWebKit.*Mobile.*Safari/.test(navigator.userAgent) ) {
  var headNode = document.getElementsByTagName("head")[0];
  var sbNode = document.createElement('meta');
  sbNode.name = 'apple-itunes-app';
  sbNode.content = 'app-id=your-iPadAppId';
  headNode.appendChild(sbNode);
} else if ( /(iPhone|iPod).*AppleWebKit.*Mobile.*Safari/.test(navigator.userAgent) ) {
  var headNode = document.getElementsByTagName("head")[0];
  var sbNode = document.createElement('meta');                    
  sbNode.name = 'apple-itunes-app';                
  sbNode.content = 'app-id=your-iPhoneAppId';
  headNode.appendChild(sbNode);
}

Neither the stock browser nor Chrome on Android provides a feature similar to mobile Safari’s Smart App Banner, however, there is a jQuery Smart Banner plugin written by Arnold Daniels that brings this awesome feature to Android, as well as to older versions of iOS.

 

 

You can download the required JavaScript, CSS, and image from here, or directly from GitHub.

 

To display the Smart Banner for Android, insert the following meta tag in head of each page where you want the banner to be displayed:

 

<meta name="google-play-app" content="app-id=myAppId">

Add the required CSS and JavaScript:

 

<link rel="stylesheet" href="jquery.smartbanner.css" type="text/css" media="screen">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="jquery.smartbanner.js"></script>

 

Initialize Smart Banner with the title and author of your app:

 

$.smartbanner({
  title: 'Audience Opinion',
  author: 'Dunn Solutions Group'
});

 

The jQuery Smart Banner plugin has the following default options.

 

$.smartbanner({
  title: null, // What the title of the app should be in the banner (defaults to <title>)
  author: null, // What the author of the app should be in the banner (defaults to <meta name="author"> or hostname)
  price: 'FREE', // Price of the app
  appStoreLanguage: 'us', // Language code for App Store
  inAppStore: 'On the App Store', // Text of price for iOS
  inGooglePlay: 'In Google Play', // Text of price for Android
  inWindowsStore: 'In the Windows Store', // Text of price for Windows
  icon: null, // The URL of the icon (defaults to <meta name="apple-touch-icon">)
  iconGloss: null, // Force gloss effect for iOS even for precomposed
  button: 'VIEW', // Text for the install button
  scale: 'auto', // Scale based on viewport size (set to 1 to disable)
  speedIn: 300, // Show animation speed of the banner
  speedOut: 400, // Close animation speed of the banner
  daysHidden: 15, // Duration to hide the banner after being closed (0 = always show banner)
  daysReminder: 90, // Duration to hide the banner after "VIEW" is clicked *separate from when the close button is clicked* (0 = always show banner)
  force: null // Choose 'ios', 'android' or 'windows'. Don't do a browser check, just always show this banner
})

If you have the Apple specific meta tag inserted in head of your web page, jQuery Smart Banner plugin will generate a banner for your app even when the user is on an unsupported iOS version (iOS 5 or below), or when a third-party browser is used.

 

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

 

 

Be careful not to use jQuery Smart Banner when mobile Safari is already capable of displaying the Smart App Banner, otherwise, users may see two Smart Banners on your site:

 

 

Check the browser's user agent and use jQuery Smart Banner only when the user is not on mobile Safari on iOS 6 and later:

 

if ( !(/(iPad|iPhone|iPod).*OS [6-7].*AppleWebKit.*Mobile.*Safari/.test(navigator.userAgent)) ) {
  $.smartbanner({
    title: 'Audience Opinion',
    author: 'Dunn Solutions Group'
  });
}