Working on a project “Is it kosher?” we came to idea, that it is worth to have one site for app installation to different mobile Operating systems.
It means, that visiting site from Android or iOS, user will get a possibility to install app directly from the site, without looking for proper links. And in this case, I like the way Apple works – it gives a possibility to pop-up a small banner. This is explained in the article Promoting Apps with Smart App Banners. Google doesn’t give such a wonderful tool, so I started looking for it.
I found jQuery Smart Banner by Arnold Daniels, which gives an opportunity to show app installation banner for proper OS.
I implemented it in the following way:
1. add to HEAD of your page the following lines.
2. add SmartBanner
Note: it should go after jQuery script.
3. And finally, add own script with SmartBanner rules:
jQuery(document).ready(function () {
jQuery.smartbanner({
title: null, // What the title of the app should be in the banner (defaults to)
author: null, // What the author of the app should be in the banner (defaults to 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
icon: '/wp-content/themes/appr/img/icon.png', // The URL of the icon (defaults to )
iconGloss: null, // Force gloss effect for iOS even for precomposed (true or false)
button: 'VIEW', // Text on 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 (0 = always show banner)
force: null // Choose 'ios' or 'android'. Don't do a browser check, just always show this banner
});
});
Our site is working on WordPress and I could use proper plugin AppBanners, but I decided to do it just in our theme. Those, who want to do it also there, here is an extract from functions.php file:
function appr_enqueue_scripts() {
....
wp_register_script( 'smartbanner', THEME_DIR . '/js/jasny-jquery.smartbanner/jquery.smartbanner.js', array( 'jquery' ), '1', true );
wp_enqueue_script( 'smartbanner' );
wp_register_script( 'local', THEME_DIR . '/js/local.js', array( 'jquery', 'smartbanner' ), '1', true );
wp_enqueue_script( 'local' );
}
add_action( 'wp_enqueue_scripts', 'appr_enqueue_scripts' );
If you want to try it, just visit “Is it kosher?” site or use QR Code
here are the screenshots how it looks like:
