smartbanner.js    

Customisable smart app banner for iOS and Android.

!smartbanner.js iOS screenshot   !smartbanner.js Android screenshot

Features

- Populating smartbanner is as easy as adding meta tags, no JavaScript knowledge required
- Default Smart App Banner like design
- Customisable info with i18n support and design by using
- automatically generated smartbanner-- class on wrapper
- custom design modifier for externally defined styles or same design on all platforms
- Close button that closes the banner and sets cookie to keep banner closed
- for current session or for defined time
- at current path or site-wide
- Platform-specific app icon and _View_ button
- User Agent specific targeting
- Pure JavaScript coming in at 17 KB minified, no jQuery required
- Events emitted for API implementations
- ECMAScript 6 source

Basic Usage

smartbanner.js works automagically given following meta tags:

``html














`

Additionally, JavaScript and CSS has to be included:

`html


`

Advanced usage

$3

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:
`html

`
This regular expression would match any user agent string, that ends with My Example Webapp.

$3

In addition to blacklisting certain user agents using the regex explained in the previous section, you can also whitelist certain user agents:
`html

`

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.

$3

If you want to position smart app banner yourself (e.g. in CSS), you can disable built-in positioning with following option:
`html

`

$3

If you want to prevent smartbanner rendering in some html pages, you can add optional meta tag:

`html

`

$3

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):

`html

`

$3

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):

`html

`

$3

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.:

`html

`

which would add smartbanner--mysite.com class on wrapper.

- forced platform-specific styles on all platforms, e.g.:

`html

`

which would add smartbanner--ios class on wrapper regardless of actual platform.

$3


If you want to have a different button label for each platform, you can use the following meta tags:
`html


`

$3

By default smartbanner is added to DOM automatically. You can disable it with

`html

`

and add smartbanner to DOM manually:

`js
smartbanner.publish();
`

$3

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):

`js
document.addEventListener('smartbanner.clickout', smartbanner.exit);
``

Contributing

See CONTRIBUTING.md.

Sponsors

Cross-browser testing across all mobile platforms is powered by

Licence

Copyright © 2016-2024 Ain Tohvri, contributors. Licenced under GPL-3.