npm install --save react-smartbanneror...
yarn add react-smartbannerRemember to add following meta tags in your HTML page: (Use Facebook app as example)
<head>
<meta name="apple-itunes-app" content="app-id=284882215">
<meta name="google-play-app" content="app-id=com.facebook.katana">
<meta name="msApplication-ID" content="82a23635-5bd9-df11-a844-00237de2db9e">
<meta name="msApplication-PackageFamilyName" content="facebook_9wzdncrfhv5g">
<meta name="kindle-fire-app" content="app-id=B0094BB4TW">
<link rel="apple-touch-icon" href="icon.png">
<link rel="android-touch-icon" href="icon.png">
<link rel="windows-touch-icon" href="icon.png">
</head>
And React-SmartBanner component usage:
import React from 'react';
import ReactDOM from 'react-dom';
import SmartBanner from 'react-smartbanner';
import './node_modules/react-smartbanner/dist/main.css';
ReactDOM.render(<SmartBanner title={'Facebook'} />, document.getElementById('content'));
| key | default | description |
|---|---|---|
| daysHidden | 15 | Days to hide banner after close button is clicked. |
| daysReminder | 90 | Days to hide banner after "VIEW" button is clicked. |
| appStoreLanguage | (user's browser language) | Language code for the App Store. |
| title | '' | App title. |
| author | '' | App author. |
| button | 'View' | Display on install button. (node) |
| storeText | { ios: 'On the App Store', android: 'In Google Play', windows: 'In Windows store', kindle: 'In Amazon Appstore' } | Store text (object). |
| price | { ios: 'FREE', android: 'FREE', windows: 'FREE', kindle: 'FREE' } | Price text (object). |
| position | 'top' / 'bottom' | Display position on screen. Bottom is fixed, top scrolls out. |
| force | '' | Force to display in specific device. ( android, ios, windows, kindle) |
| url | { ios: 'http://www.domain.com', android: 'http://www.domain2.com', windows: 'http://www.domain3.com', kindle: 'http://www.domain4.com' } | Custom URL for each device |
| ignoreIosVersion | false | Boolean to ignore the iOS version, so that the banner is also displayed on devices that support the native banner. |
| appMeta | { ios: 'apple-itunes-app', android: 'google-play-app', windows: 'msApplication-ID', kindle: 'kindle-fire-app' } | The custom meta tag name (object). It provide an option to enforce using custom meta tag to show js react-smartbanner for newer iOS versions. |
| onClose | No default value | Optional callback when user clicks on close button. |
| onInstall | No default value | Optional callback when user clicks on install button. |
MIT License