the MMM blog

How to Create a Mobile App Banner Popup on Website

How to Create a Mobile App Banner Popup on Website


Mobile app banner is a banner appears on top of the screen when a user browse website on mobile device. The banner provdes a link to the mobile app which is related or promoted by the website. Here, I am going to show you how to setup a mobile app banner for iOS and Android.

for iOS

Thanks to Apple's Smart App Banner feature since iOS 6, it makes developers life much easier. All you need to do is to add a meta tag "apple-itunes-app"

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

For example, if your iOS app URL is https://itunes.apple.com/au/app/chrome-web-browser-by-google/id535886823?mt=8, all you need to do is to put the following HTML in the head section of pages you would like to show app banner.

<head>
...
<meta name="apple-itunes-app" content="app-id=535886823">
...
</head>

For reference, you can check Apple's guide Promoting Apps with Smart App Banner.

 

for Android

Android app banner is a bit more complicated than iOS because there are too many variations out there. Developers have to put up some custom JavaScripts to make it working. Here are some good resources:

1. Smart app banner use jQuery https://github.com/jasny/jquery.smartbanner

Examples:

<html>
  <head>
    ...
    <meta name="author" content="Google, Inc.">
    <meta name="apple-itunes-app" content="app-id=544007664">
<meta name="google-play-app" content="app-id=com.google.android.youtube">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="jquery.smartbanner.css" type="text/css" media="screen"> <link rel="apple-touch-icon" href="apple-touch-icon.png">
... </head> <body> ... <script src="http://www.yijunma.com//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <script src="jquery.smartbanner.js"></script> <script type="text/javascript"> $(function() { $.smartbanner() } ) </script> </body> </html>

 

2. Smart app banner without jQuery https://github.com/kudago/smart-app-banner

Examples:

<html>
  <head>
    <title>MyPage</title>
    <meta name="apple-itunes-app" content="app-id=502838820">
    <meta name="google-play-app" content="app-id=ru.hh.android">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="node_modules/smart-app-banner/smart-app-banner.css" type="text/css" media="screen">
    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <link rel="android-touch-icon" href="android-icon.png" />
... </head> <body> ... <script src="node_modules/smart-app-banner/smart-app-banner.js"></script> <script type="text/javascript"> new SmartBanner({ daysHidden: 15, // days to hide banner after close button is clicked (defaults to 15) daysReminder: 90, // days to hide banner after "VIEW" button is clicked (defaults to 90) appStoreLanguage: 'us', // language code for the App Store (defaults to user's browser language) title: 'MyPage', author: 'MyCompany LLC', button: 'VIEW', store: { ios: 'On the App Store', android: 'In Google Play', windows: 'In Windows store' }, price: { ios: 'FREE', android: 'FREE', windows: 'FREE' } }); </script> </body> </html>

"The measure of who we are is what we do with what we have"

Contact me!

Have questions? Feel free to use the form or send me an email with any questions.

I will be responsive to your requests and your questions.