Ember-smart-banner NPM

ember-smart-banner

ember-smart-banner is an addon that can be installed with Ember CLI. The addon provides a simple configurable Smart Banner that can be used in your Ember.js application.

npm.io

Installation

$ cd your-project-directory
$ ember install ember-smart-banner

Usage

You can place the component directly in application.hbs file in order for component to be rendered by default when your application starts

//your-ember-app/app/templates/application.hbs
{{smart-banner}}
{{outlet}}

Banner Defaults:

appStoreLinkBase: 'https://itunes.apple.com'
appStoreLanguage: 'en'
appIdIOS: '123',
marketLinkBase: 'market://details?id=',
appIdAndroid: '123',
title: 'App Name',
description: 'Company Name, Inc.',
linkText: 'View',
link: 'https://itunes.apple.com',
iconUrl: 'http://icons.iconarchive.com/icons/wineass/ios7-redesign/512/Appstore-icon.png'

Banner can be configured through config/environment.js

module.exports = function(environment) {
  var ENV = {

    ...

    emberSmartBanner: {
      title: 'App Title',
      description: 'Description',
      linkText: 'View',
      appIdIOS: '123',
      appStoreLanguage: 'en',
      iconUrl: 'http://icons.iconarchive.com/icons/wineass/ios7-redesign/512/Appstore-icon.png'
    }

    ...

Set title, description, link test, and url for icon through template

{{smart-banner
    appIdIOS=12335
    appIdAndroid=56789
    appStoreLanguage=fr // set to french ISO 639-1 code
    openAfterClose=30 // show close button 30 days after
    openAfterVisit=false // never show again after click
}}

Features

iOS 7 or later banner design
Detects iOS or Android platform and links to appropriate store
Automatically determines whether the app is supported on the user’s device (iOS or Android). If the device loading the banner does not support your app, or if your app is not available in the user's location, the banner will not display.
Set number of days before the banner is shown again after it's closed and/or after the visitor clicks "View" button
Option to set number of days before the banner is shown again to 'false' to never show banner again after the visitor clicks "View" button
Flexible configuration allows you to always show banner regardless of operating system
It will not render on iOS or Android unless their respective appId is set
Set title, description, link test, and url for icon through template
Configure parameters in your application's environment using the default environment config file at config/environment
Render defaults if no parameters are set
Set duration to postpone showing the banner again after it's closed and/or after the visitor clicks "View" button

    showAfterClose=3 // show 3 days after banner it closed
    showAfterVisit=30 // show 30 days after clicking visit link

Set banner to default to open or default to close next time the user starts the application

    showAfterClose=true // show banner again after clicking visit
    showAfterVisit=true // show banner again after clicking visit
    showAfterClose=false // never show again after clicking visit
    showAfterVisit=false  // never show again after clicking visit

Define your own callback to be invoked when clicking view button or close button

  {{smart-banner
      appIdIOS=12335
      appIdAndroid=56789
      onclose=(action myCallback) // callback will be invoked when use clicks close
      onvisit=(action anotherCallback) // callback will be invoked when user clicks view
  }}

##Roadmap

Automatic icon detection
Refactor tests to use utils
Mozilla local-forage implementation
Windows support
If the app is already installed on a user's device, the banner intelligently changes its action, and tapping the banner will simply open the app.
Provide navigational context to native app