Steps to reproduce:

1. go to a page with the banner that is not the root page of the site. Eg: example.com/test/path/page
2. hide de banner and refresh
3. the banner is not shown and the smartbanner_exited cookie is set correctly accept for the path. The path is set to /test/path/page
4. Go to a page that is lower in the page tree. Eg: example.com/test or example.com and the banner will popup again

What happens:
The incorrect path will allow the banners to show again on pages that are nog on /test/path/page. The homepage will show the banner or pages on another path as well. Only if a user visits the homepage fist and hides it there, the path will be set correctly.

What should happen:
If I hide the banner on one page of my site, it should be hidden everywhere. The path of the cookie should be the root of the site. Or even better, an extra smartbanner option.

Additional info:

Used smartbanner tags:

<meta name="smartbanner:title" content="My App">
<meta name="smartbanner:author" content="John Doe">
<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 Store">
<meta name="smartbanner:icon-apple" content="smartbanner-icon.png">
<meta name="smartbanner:icon-google" content="smartbanner-icon.png">
<meta name="smartbanner:button" content="VIEW">
<meta name="smartbanner:button-url-apple" content="itmss://itunes.apple.com/be/...">
<meta name="smartbanner:button-url-google" content="https://play.google.com/store/..."> `

@ain , thank you for awesome SmartBanner once again.

How we can hide SmartBanner on Desktop computers? It should not be there by default, right? It is supposed to be on iOS/Android devices only.

Tested on iMac, Macbooks (the latest OSx, Chrom)

hello,
i have a device NOKIA 1520 with Windows 10 and show banner..
i add

but not it works.
please fix

Hi,

Its possible to position the smartbanner div in certain part of my code with all the functionalities?

Hey, very cool library, would you consider changing your license to MIT?

To satisfy several requests, e.g. #15, API should be revealed for external use so direct interaction with smartbanner.js would be possible.

Hello. Can we add review option (star and reviews count) like image bellow:

Thank you.

When bundling an app using this package with webpack, a warning is thrown because it's best to include source files instead of preprocessed js files, which is not possible to do because the package doesn't include the sources files.

WARNING in ./~/smartbanner.js/dist/smartbanner.js
Critical dependencies:
5:113-120 This seems to be a pre-built javascript file. Though this is possible,
it's not recommended. Try to require the original source to get better results.
 @ ./~/smartbanner.js/dist/smartbanner.js 5:113-120

is it possible to verify if the app is already installed before redirecting to the store.
so if installed it opens the app if not redirect to the appropriate store.
thanks

Environment
OS: iOS 9,11
Device: iPhone 6, 10

This is the user agent of the iPhone device where I found the problem

Mozilla/5.0 (iPhone; CPU iPhone OS 9_0_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13A405 Safari/601.1

Steps to reproduce:
Similar to #66 but I need it to work in Safari

1. Install smartbanner.js on your web server (in my case it's nginx + PHP-FPM)

2. Add these meta tags to your

   <meta name="apple-itunes-app" content="app-id={redacted}">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-icon" content="/Images/Core/favicons/apple-touch-icon-57x57.png">
<meta name="mobile-web-app-capable" content="yes">
<meta name="google-play-app" content="app-id={redacted}">

3. Add JS
   $(document).ready(function () {
$.smartbanner({
title: "TITLE", // What the title of the app should be in the banner (defaults to <title>)
author: "AUTHOR, // What the author of the app should be in the banner (defaults to <meta name="author"> 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
GooglePlayParams: null, // Aditional parameters for the market
iconGloss: null, // Force gloss effect for iOS even for precomposed
url: null, // The URL for the button. Keep null if you want the button to link to the app store.
button: "VIEW", // Text for 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: 0, // Duration to hide the banner after being closed (0 = always show banner)
daysReminder: 0, // Duration to hide the banner after "VIEW" is clicked *separate from when the close button is clicked* (0 = always show banner)
force: null, // Choose 'ios', 'android' or 'windows'. Don't do a browser check, just always show this banner
hideOnInstall: true, // Hide the banner after "VIEW" is clicked.
layer: false, // Display as overlay layer or slide down the page
iOSUniversalApp: true, // If the iOS App is a universal app for both iPad and iPhone, display Smart Banner to iPad users, too.
appendToSelector: "body", //Append the banner to a specific selector
onInstall: function () {
},
onClose: function () {
$('#smartbanner').slideUp('slow');
}
});
});

What happens:

What should happen:
Banner should display overriding the safari default.

It would be beneficial for 3rd party components if smartbanner.js emitted smartbanner.exit and smartbanner.view events on its container, e.g. for tracking purposes.

All Bower dependencies should be moved to NPM so only one central dependency management system could be used.

I see the option to hide site wide. Is there an option to show only on the root page or a specific page ?

Hi,
window.onload is overrided so any other events that was attached to it disappears

Steps to reproduce:

1. I setup JS + CSS + meta on my page (JS and CSS contained in dist folder)
2. I display the page where script are inserted
3. Banner is not displayed due to a javascript error

What happens:
Error on Chrome:
uncaught TypeError: Cannot set property outerHTML of # which has only a getter
at SmartBanner.publish (smartbanner.js?v=1519147006:310)
at smartbanner.js?v=1519147006:121

What should happen:
Banner should be displayed
Remark : Using index.html you provided, I got no issue

Smart Banner doesn't work in embedded Android browser on any version of OS. What can be the cause of that?

How to reproduce:

1. Add smartbanner.js to AJAX page with jQuery Mobile
2. Add jQuery Mobile button to page and click it

What happens: nothing happens on click.

What should happen: click should call handler as expected.

Hello. Can we set cookie value (smartbanner_exited) in js code ? Example i want to show banner every 15 day and only one time. Thank you.

Is it possible to hide smartbanner only in safari browser ?

Is there any way to create platform-specific titles if the android and iOS applications have different names?

I'm getting an undefined error when I try and create a new method for title

hello,
i'm configured your component in a my site.
this is a my configuration

meta name="smartbanner:title" content="My Title name">
meta name="smartbanner:author" content="My Company">
meta name="smartbanner:price" content="Free">
meta name="smartbanner:price-suffix-google" content=" - In Google Play">
meta name="smartbanner:icon-google" content="smartbanners/appIcon.png">
meta name="smartbanner:button" content="View">
meta name="smartbanner:button-url-google" content="app url">
meta name="smartbanner:enabled-platforms" content="android">

if i open my site in a Windows 10 mobile (browser edge) show banner.. why?
later I also tried to add:

meta name="smartbanner:exclude-user-agent-regex" content="MSIE ([0-9]{1,}[.0-9]{0,})"

but not it works.
how should I do? it is bad that on windows devices show the banner of Android app installs
thanks

Navigation to app stores doesn't work in AngularJS apps because the angular attempts to handle the href itself.

If we have a fixed header layout page, smartbanner is appears under that header.

Do you have a solution?

When I run "npm run install-deps" I get this error (I am using npm 2.1.12 and I have tried "npm update" but this doesn't make a difference:

npm run install-deps

[email protected] install-deps /Users/theonicolaou/Documents/websites/smartbannerjs/smartbanner.js
npm install && bundle install

npm WARN package.json [email protected] scripts['server'] should probably be scripts['start'].
npm WARN package.json [email protected] No README data
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
[email protected] node_modules/add-banner
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected])
└── [email protected] ([email protected])
sh: bundle: command not found

npm ERR! Darwin 16.5.0
npm ERR! argv "node" "/usr/local/bin/npm" "run" "install-deps"
npm ERR! node v0.10.33
npm ERR! npm v2.1.12
npm ERR! code ELIFECYCLE
npm ERR! [email protected] install-deps: npm install && bundle install
npm ERR! Exit status 127
npm ERR!
npm ERR! Failed at the [email protected] install-deps script 'npm install && bundle install'.
npm ERR! This is most likely a problem with the smartbanner.js package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm install && bundle install
npm ERR! You can get their info via:
npm ERR! npm owner ls smartbanner.js
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/theonicolaou/Documents/websites/smartbannerjs/smartbanner.js/npm-debug.log

Hi,

I am unable to track clicks on the smart banner using the jQuery on click event. I wish to track both clicks on the "view" links and clicks on the close button (i.e. the X) for the purpose of sending the data to Google Analytics.

The code I've been trying does works to capture all click events on the webpage, except it is not capturing clicks on the smartbanner.

These are some examples I've been trying which are not working.

$('.smartbanner a').on('click',function(){
ga('send', 'event','android','smartbanner', $(this).text(), {transport: 'beacon'});
});

$('.smartbanner__exit').on('click',function(){
ga('send', 'event','android','smartbanner', 'smartbanner__exit', {transport: 'beacon'});
});

$(document).ready(function() {

$(".smartbanner a").on('click', function(event) {
event.preventDefault();
console.log('Click on smart banner');
});

Hi @ain,

'npm run bannerise' on Windows 10 (and might be others as well) is giving 'Error: ENOENT: no such file or directory, open C:\Users\rihards.neimanis\Projects\smartbanner.js\dist\*.*s'. My assumption is that windows just does not understand the regex *.*s

The full error description:

Error: ENOENT: no such file or directory, open 'C:\Users\rihards.neimanis\Projects\smartbanner.js\dist*.*s'
at Error (native)
at Object.fs.openSync (fs.js:549:18)
at Object.fs.readFileSync (fs.js:397:15)
at read (C:\Users\rihards.neimanis\Projects\smartbanner.js\node_modules\add-banner\index.js:17:13)
at module.exports (C:\Users\rihards.neimanis\Projects\smartbanner.js\node_modules\add-banner\index.js:70:25)
at bannerise (C:\Users\rihards.neimanis\Projects\smartbanner.js\node_modules\add-banner\bin\add-banner:22:26)
at Array.forEach (native)
at Object. (C:\Users\rihards.neimanis\Projects\smartbanner.js\node_modules\add-banner\bin\add-banner:28:14)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] bannerise: add-banner --template=banner.tmpl dist/*.*s
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] bannerise script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\rihards.neimanis\AppData\Roaming\npm-cache_logs\2017-07-15T16_28_06_525Z-debug.log

KR,

Ricco

Hey,

First of all I really like your work and thanks a lot for making it!
Since I'm not a web dev, I only understand the code so and so, but I want to implement a "hide/show" feature depending on the scrolling direction. I've googled a lot, but couldn't really solve the problem, so I thought that the best solution would be posting a question here.
Here is a link to show what do I want exactly:
http://jsfiddle.net/mariusc23/s6mLJ/31/

Thanks a lot,
Kristof Kovacs

Using node v8.1.4. There is no reason to force using node 6

Hello sir,
Please add windows store too.

Hello,

Just cloned and deployed your script to my mobile site. It worked when I tried to view the site from desktop browser using user agent changer on Chrome. But it didn't worked when I tried to view it from actual iPhone and Android device.

Do you know what might be the problem?

Hi Ain,
Thanks for the awesome smartbanner code :)
can we change button text to "Open" if the app already installed ? And if click Open automatic opens the app.

hi, well done, very simple and fast.
I had a problem due to position:absolute in .smartbanner class.

Maybe it is done to hiding nothing from the original site, but for example, in my case I have a fixed header so... when the banner appear my body go down... i need a fixed smartbanner.
I don't like so much that the function setContentPosition that put a margin-top on the html tag

I solved adding an attribute data-smartbanner-original-margin-top="0" in my html tag, so in setContentPosition function it enter in the if condition and do continue;

      if (wrapper.getAttribute(datas.originalMarginTop)) {
        continue;
      }

and overriding the position:absolute rule

.smartbanner {
	position: fixed;
}

thanks
cheers
Paolo

When trying to use this module on a site, I get "Uncaught ReferenceError: exports is not defined". The issue occurs with both the minified and unminified bundles in dist/. It occurs when viewing demo/index.html as well.

What am I missing?

Browser: Chrome

Sorry.
But I think your smartbanner.min.js have a problem.
When I use smartbanner.min.js "X" button can not show.
But When I use smartbanner.js "X" button show normally.
Thanks for reading. :)

I'm trying to use this script imported into a bundle in my project but when I try to import 'smartbanner.min.js' because it can't find the other requires/imports (which should they really be in a minified file?...) I get errors.

"Cannot find module './polyfills/array/from.js" and basically swaps between them all (bakery.js, optionparser.js etc)

I know why it's happening, just not how to fix it. Even if I install the smartbanner.js into it's own folder the polyfills still aren't in the 'node_modules' folder. Probably something really silly but it's driving me crazy so any help would be appreciated!

IE11 errors out when smartbanner is run, Array.from and Array.includes are missing. And polyfills for both of them are pretty big.

After checking the code:
if (Array.from(optionName).includes('-'))

This line converts string to char array (using function not supported in IE11) and checks if the char array contains char '-' (using another function not supported in IE11).

Equivalent code without any polyfill-needing functions:
if (optionName.indexOf('-') != -1) {

Another line:
Array.from(metas).forEach(function (meta) {

Again, Array.from does not work in IE11, simpler alternative would be:
for (let i = 0; i < metas.length; i++) {
let meta = metas[i];

Bootstrap 4 nav with high z-index needs workaround with the smart banner. Smart banner element stays behind the navbar. Fix was to set value of smart banner z-index to '9999'.

Hi,
thank you for such a wonderful banner
this app install banner is working as expected on chrome but the close button is not working for firefox
also sometime the close button is not appearing on UC browser but if you touch on left it is able to close
if you can suggest me anything which help to solve the problem

thanks,

Hi there, Is there an option to only show the banner for android phones ?

Steps to reproduce: (mostly the same as #71 )

1. add meta tag
2. go to a page with the banner that is not the root page of the site. Eg: example.com/test/path/page
3. hide the banner and refresh
4. the banner is not shown and the smartbanner_exited cookie is set correctly accept for the path. The path is set to /test/path/page
5. Go to a page that is lower in the page tree. Eg: example.com/test or example.com and the banner will popup again

What happens:
In smartbanner.js line: 201 "Bakery.bake(this.hideTtl, this.hidePath);"
this.hidePath is undefined. Then the default path (current page) is used.

What should happen:
this.hidePath should have the "/" value from the meta tag?

It seems this.options.hidePath is filled with the correct content from the meta tag.

Steps to reproduce:

1.When attempting 'npm run build' command in Windows platform
2.
3.

What happens: The following error is displayed: 'node modules' is not recognized as an internal or external command

What should happen:Rendering should be ongoing

Hey there, I know this is probably not the best place to ask this. I was looking for an email address for you or contact info, but couldn't find any. Currently I have a Wordpress Plugin called AppBanners - https://wordpress.org/plugins/appbanners/ I am using https://github.com/jasny/jquery.smartbanner as the sole driver for the plugin, but the author isn't updating and accepting pull requests, so I am looking for a replacement. I found your project and think it would be an excellent replacement for jasny's script. Before I did so, I just wanted to make sure it would be okay with you.

Hello!!

Nice project that you have here!

I would like to improve this project with a simple snipet that detect that app is already installed and redirect to it or app wans't installed and redirect to app store.

It could improve the user experience =D

Here are the proposal:

iOS

When smartbanner opens on iOS, the following snippet may apply:

var ifrm = document.getElementById("innerFrame");
function redirect_to_store() {
  if (!document.hidden) {
    window.location.href = store_link;
  }
}
try {
  ifrm.src = app_link;
} catch (e) {
  window.location.href = store_link;
}
setTimeout (redirect_to_store, 1000);

Android

On android, we can use something called Intent Links. Here is a post with better explanation.

https://developer.chrome.com/multidevice/android/intents

We can define some metas with data needed and i can made an PullRequest =)

Hope i can help :)

Steps to reproduce:

1. Here is the config

     <meta name="smartbanner:title" content="Company" />
     <meta name="smartbanner:author" content="ME" />
     <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="/~/media/g" />
     <meta name="smartbanner:icon-google" content="/~/media/p" />
     <meta name="smartbanner:button" content="VIEW" />
     <meta name="smartbanner:button-url-apple" content="https:///itunes.apple.com/us/app/" />
     <meta name="smartbanner:button-url-google" content="https://play.google.com/store/apps/details?id=" />
     <meta name="smartbanner:enabled-platforms" content="android,ios" />

What happens:
Everything works fine but on the next session on a physical device (Samsung Galaxy S4 samsung-sgh-i337) Android 4.4.4, the smartbanner does not appear.
I kill the browser app (chrome 64.0.3282.137), to ensure new session

What should happen:
I thought the cookie was defaulted to current session. So the banner should appear on each visit.

I just noticed that 3 unit tests are failing on my system. Did not yet investigate it further. Is it a known problem?

$ npm run test       

> [email protected] test /home/fabian/workspace/machtfit/smartbanner.js
> node_modules/mocha/bin/mocha --compilers js:babel-core/register test/spec/*.js



  Bakery
    bake
      ✓ expected to set cookie
    baked
      ✓ expected to return true if cookie is set
      ✓ expected to return false if cookie is not set
    unbake
      ✓ expected to remove cookie

  Detector
    platform
      when on iPhone
        ✓ expected to return ios
      when on iPad
        ✓ expected to return ios
      when on iPod
        ✓ expected to return ios
      when on Android
        ✓ expected to return android
    jQueryMobilePage
      without jQuery Mobile
        ✓ expected to return false
      with jQuery Mobile
        1) expected to return true
    marginedElement
      without jQuery Mobile
        ✓ expected to return html element as first item of array
      with jQuery Mobile
        2) expected to return ui-page element as first item of array

  OptionParser
    parse
      with smartbanner meta tags
        ✓ expected to parse title
        ✓ expected to parse author
        ✓ expected to parse price
        ✓ expected to parse iOS price suffix
        ✓ expected to parse Android price suffix
        ✓ expected to parse button label
        ✓ expected to parse iOS icon
        ✓ expected to parse Android icon
        ✓ expected to parse iOS button URL
        ✓ expected to parse Android button URL
        ✓ expected to parse enabledPlatforms option
      without smartbanner meta tags
        ✓ expected to return empty object
      without any meta tags
        ✓ expected to return empty object

  SmartBanner
    publish
      without options
        ✓ expected to throw error
      with options
        when on iPhone
          ✓ expected to add iOS template to body
          ✓ expected to store original top margin
        when on iPad
          ✓ expected to add iOS template to body
        when on iPod
          ✓ expected to add iOS template to body
        when on Android
          ✓ expected to add Android template to body
        when on desktop
          ✓ expected to not add anything to body
      when has been closed within current session
        ✓ expected to not to add to body
      when has been closed, but is reopened in new session
        ✓ expected to add to body
      when enabled-platform set to android, but opened on iOS
        ✓ expected to not add anything to body
      when enabled-platform set to ios, but opened on Android
        ✓ expected to not add anything to body
    template
      when on iPhone
        ✓ expected to work against iOS platform
        ✓ expected to have iOS price suffix
        ✓ expected to return iOS template
        ✓ expected to have iOS icon
        ✓ expected to have iOS button URL
      when on iPad
        ✓ expected to work against iOS platform
        ✓ expected to have iOS price suffix
        ✓ expected to return iOS template
        ✓ expected to have iOS icon
        ✓ expected to have iOS button URL
      when on iPod
        ✓ expected to work against iOS platform
        ✓ expected to have iOS price suffix
        ✓ expected to return iOS template
        ✓ expected to have iOS icon
        ✓ expected to have iOS button URL
      when on Android
        ✓ expected to work against Android platform
        ✓ expected to have Android price suffix
        ✓ expected to return Android template
        ✓ expected to have Android icon
        ✓ expected to have Android button URL
    exit
      without jQuery Mobile
        ✓ expected to set cookie
        ✓ expected to remove component markup
        ✓ expected to restore HTML margin
      with jQuery Mobile
        3) expected to restore top distance
    height
      ✓ expected to match component offset height


  58 passing (415ms)
  3 failing

  1) Detector jQueryMobilePage with jQuery Mobile expected to return true:
     AssertionError: expected false to be true
      at Context.<anonymous> (test/spec/detector_spec.js:111:9)

  2) Detector marginedElement with jQuery Mobile expected to return ui-page element as first item of array:

      AssertionError: expected { Object () } to deeply equal { Object () }
      + expected - actual

      
      at Context.<anonymous> (test/spec/detector_spec.js:148:49)

  3) SmartBanner exit with jQuery Mobile expected to restore top distance:

      AssertionError: expected 12 to deeply equal NaN
      + expected - actual

      -12
      +NaN
      
      at Context.<anonymous> (test/spec/smartbanner_spec.js:496:24)




npm ERR! Linux 4.8.12-gentoo
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "run" "test"
npm ERR! node v6.9.1
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] test: `node_modules/mocha/bin/mocha --compilers js:babel-core/register test/spec/*.js`
npm ERR! Exit status 3
npm ERR! 
npm ERR! Failed at the [email protected] test script 'node_modules/mocha/bin/mocha --compilers js:babel-core/register test/spec/*.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the smartbanner.js package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node_modules/mocha/bin/mocha --compilers js:babel-core/register test/spec/*.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs smartbanner.js
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls smartbanner.js
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/fabian/workspace/machtfit/smartbanner.js/npm-debug.log

Background:
According to issue #3 smartbanner.js works with

• Android 6 (Samsung Galaxy S7, Nexus 6, Moto X 2nd gen)
• Android 5 (Samsung Galaxy S6)
• Android 4.4 (Samsung Galaxy S5)

However, I can not get smartbanner to appear on a Galaxy S5, 6, 7 It does work in S8 and S8+ (Andriod 7)
It does work in Chrome and Firefox for all devices

Steps to reproduce:

1. Here is the config

     <meta name="smartbanner:title" content="Company" />
     <meta name="smartbanner:author" content="ME" />
     <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="/~/media/g" />
     <meta name="smartbanner:icon-google" content="/~/media/p" />
     <meta name="smartbanner:button" content="VIEW" />
     <meta name="smartbanner:button-url-apple" content="https:///itunes.apple.com/us/app/" />
     <meta name="smartbanner:button-url-google" content="https://play.google.com/store/apps/details?id=" />
     <meta name="smartbanner:enabled-platforms" content="android,ios" />

I use browser stack for testing

What happens:
Nothing, no errors, no banner

What should happen:
Banner should appear

I only have on real iOS devices 9+ blank banner. Without picture too. But on devTools emulator is all OK. Because margin-top:84px on html tag. Only in safari.

Installation of RubyGems is not seamless and sets new non-standard requirements for dependency installation.

sass-lint should be used instead with a matching linting configuration.

Would it be possible to choose what element to append/prepend the smart banner to? Consider you want to have the smart banner inside another element, like a header, and not have it absolute positioned (which we obviously can change with CSS).

Right now it's automatically appended to the body tag which is not desired for all use cases.

If currently not supposed I would consider forking and then doing a pull-request.