Add app install banner to site

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 () {

            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 Codeqrcode

here are the screenshots how it looks like:

Leave a Reply

%d bloggers like this: