smartbanner.js
Customisable smart app banner for iOS and Android.
Features
- Pure JavaScript, no jQuery (14 KB in size)
- ECMAScript 6 source
- Default Smart App Banner like design
- Customisable design using
smartbanner--<platform>
class on wrapper - Fully customisable info
- Close button that
- closes the banner
- sets cookie to keep banner closed for current session or for defined time
- Platform-specific app icon URL
- Platform-specific URL for View button
- jQuery Mobile and AngularJS compliance
- User Agent specific targeting
Basic Usage
smartbanner.js
works automagically given following meta tags:
<!-- Start SmartBanner configuration --><!-- End SmartBanner configuration -->
Additionally, JavaScript and CSS has to be included:
Advanced usage
Hide the smartbanner for certain User Agents
There are cases where you do not want to show the smart app banner on all Android and/or all iOS devices. For example:
- your app is availabe only for some Android/iOS versions
- your app is only availabe on iPhone, but not iPad
- your app is a web app which also shows this website, but of course should not show the smart app banner.
In this case you can define a regular expression, which matches all user agent strings that should be excluded. Just add another meta
tag like the following:
This regular expression would match any user agent string, that ends with My Example Webapp.
Show the smartbanner for certain User Agents
In addition to blacklisting certain user agents using the regex explained in the previous section, you can also whitelist certain user agents:
Note: You can define enabled-platforms
, exclude-user-agent-regex
and include-user-agent-regex
at the same time. enabled-platforms
has the lowest priority, exclude-user-agent-regex
the highest priority.
Disable Positioning
If you want to position smart app banner yourself (e.g. in CSS), you can disable built-in positioning with following option:
Hide the smartbanner completely
If you want to prevent smartbanner rendering in some html pages, you can add optional meta
tag:
Time-limited close
By default smartbanner would not reappear if closed. This can be prevented with hide-ttl
option. Following example would keep smartbanner closed for 10 seconds (10000 ms):
Contributing
See CONTRIBUTING.md.
Sponsors
Cross-browser testing across all mobile platforms is powered by
Licence
Copyright © 2016, 2017 Ain Tohvri, contributors. Licenced under GPL-3.