Customisable smart app banner for iOS and Android.
smartbanner--<platform>
class on wrappersmartbanner.js
works automagically given following meta tags:
<!-- Start SmartBanner configuration -->
<meta name="smartbanner:title" content="Smart Application">
<meta name="smartbanner:author" content="SmartBanner Contributors">
<meta name="smartbanner:price" content="FREE">
<meta name="smartbanner:price-suffix-apple" content=" - On the App Store">
<meta name="smartbanner:price-suffix-google" content=" - In Google Play">
<meta name="smartbanner:icon-apple" content="https://url/to/apple-store-icon.png">
<meta name="smartbanner:icon-google" content="https://url/to/google-play-icon.png">
<meta name="smartbanner:button" content="VIEW">
<meta name="smartbanner:button-url-apple" content="https://ios/application-url">
<meta name="smartbanner:button-url-google" content="https://android/application-url">
<meta name="smartbanner:enabled-platforms" content="android,ios">
<meta name="smartbanner:close-label" content="Close">
<!-- End SmartBanner configuration -->
Additionally, JavaScript and CSS has to be included:
<link rel="stylesheet" href="https://github.com/ain/smartbanner.js/blob/main/dist/smartbanner.min.css">
<script src="https://github.com/ain/smartbanner.js/raw/main/dist/smartbanner.min.js"></script>
There are cases where you do not want to show the smart app banner on all Android and/or all iOS devices. For example:
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:
<meta name="smartbanner:exclude-user-agent-regex" content="^.*My Example Webapp$">
This regular expression would match any user agent string, that ends with My Example Webapp.
In addition to blacklisting certain user agents using the regex explained in the previous section, you can also whitelist certain user agents:
<meta name="smartbanner:include-user-agent-regex" content="iPhone 7">
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.
If you want to position smart app banner yourself (e.g. in CSS), you can disable built-in positioning with following option:
<meta name="smartbanner:disable-positioning" content="true">
If you want to prevent smartbanner rendering in some html pages, you can add optional meta
tag:
<meta name="smartbanner:enabled-platforms" content="none">
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):
<meta name="smartbanner:hide-ttl" content="10000">
Once closed smartbanner would reappear if site path changes. It is default behaviour.
Following example would keep smartbanner closed site-wide (but only when user has actually closed it):
<meta name="smartbanner:hide-path" content="/">
smartbanner uses built-in platform-specific styles (e.g. smartbanner--ios
or smartbanner--android
), but this behaviour can be altered by adding custom design modifier that allows use of:
externally defined styles, e.g.:
<meta name="smartbanner:custom-design-modifier" content="mysite.com">
which would add smartbanner--mysite.com
class on wrapper.
forced platform-specific styles on all platforms, e.g.:
<meta name="smartbanner:custom-design-modifier" content="ios">
which would add smartbanner--ios
class on wrapper regardless of actual platform.
If you want to have a different button label for each platform, you can use the following meta tags:
<meta name="smartbanner:button-apple" content="Download on the App Store">
<meta name="smartbanner:button-google" content="Get it on Google Play">
By default smartbanner is added to DOM automatically. You can disable it with
<meta name="smartbanner:api" content="yes">
and add smartbanner to DOM manually:
smartbanner.publish();
Following events are being dispatched:
Event | Description |
---|---|
smartbanner.init |
Dispatched when smartbanner has been initialised |
smartbanner.view |
Dispatched when smartbanner is added to display |
smartbanner.clickout |
Dispatched when smartbanner is clicked to navigate to app store |
smartbanner.exit |
Dispatched when smartbanner is closed |
Example handler (closes smartbanner when user clicks to navigate to app store):
document.addEventListener('smartbanner.clickout', smartbanner.exit);
See CONTRIBUTING.md.
Cross-browser testing across all mobile platforms is powered by
Copyright © 2016-2024 Ain Tohvri, contributors. Licenced under GPL-3.