jQuery Smart Web App Banner

Looking for the iOS 6 & 7+ Smart Banner, but saddened by it only supporting apps on the App Store & not web apps? This little jQuery-powered script is here to help. Add this small script to your site & invite your visitors to save your site to their home screen alongside the rest of their apps!

Take a look at the top of this page to see a preview of the banner.

Smart Web App Banner was made to look its best in Mobile Safari. For the sake of keeping the file size small, code wasn't added to make it look as good in Firefox or IE.
This preview looks best in Chrome, Safari, or on an iOS device.

Quick Preview

Auto iOS 7+ iOS 6 Dark

Features

Roadmap

Changelog

Version 1.5 - August 11, 2017

Version 1.4 - May 24, 2014

May 20, 2014

Version 1.3 - March 22, 2013

Version 1.2 - March 20, 2013

Version 1.1.2 - March 20, 2013

Version 1.1.1 - October 3, 2012

Version 1.1 - September 27, 2012

Version 1.0 - September 19, 2012

Beginner's Getting Started Guide

Open Getting Started Guide

Example (using default settings)

Example (with full options)

Example performing actions when the banner is shown and/or hidden

Download Now

Download Use cdnjs

Pay What You Want: Free is an option! Just enter $0; that's cool!
I wanted a way for those who'd like to support the project to share a few bucks. Pressing "download" asks for your email, but you won't be spammed (it's simply used to give you a receipt & a backup download link).

Using a CDN: cdnjs.com makes it quick & easy to add the script (complete with CSS) to your site with the benefits of a CDN. It even supports multiple protocols so it's encouraged to leave the protocol off.

It is open source: You can view it on Github and download from there too!

Requires: jQuery v1.7 or later
Still using jQuery 1.3.2 - 1.8.x? Use the jQuery.smartWebBanner.pre-1.7.min.js file instead.

Support

Email me

View on Github

FAQs

Need to have it save the homepage of your site rather than the page the visitor is on?
Saving a page to the home screen saves the current page by default, but you can set the url option to be whatever URL you would like it to save & the plugin takes care of the rest.

Tip: set url to '/' to have it always be the homepage of your site while being independent of the domain itself. Also, it can't be a different domain for security reasons.

Need to adjust the size of the banner to fit the scale of your site?
This plugin's CSS was built to refer to two elements (with one variant) that then determines the size of everything else. Simply change the font-size for #smartWebBanner & #swb-instructions (add .ipad for iPad-specific sizes) in your own CSS (or edit the plugin directly) to fit your needs. Seriously, it even works on the fly: Large, Default, Small (scroll back up & see).

Looking to use this to promote *non web-based* Android apps and/or iOS apps on older iOS versions and/or different browsers?
Check out Jasny's fork for Android apps and/or iOS apps older than iOS 6.
Also check out iJason's fork aimed purely at making it available for iOS apps in other iOS browsers (Google Chrome) & older iOS versions.
Note: Both of these are for non-web apps. This is the only plugin aimed at web apps (to my knowledge).

License

jQuery Smart Web App Banner is provided under the Apache License, 2.0.

Please know that this is in no way created, owned, or managed by Apple Inc. nor am I employed by Apple Inc.