A Smart banner is an useful element that should be shown on every website that has a mobile application to motivate and encourage the download (and usage) of the application instead of using the website. Although this banner should encourage the usage of the app, this doesn't mean that you as a developer, are going to neglect or abandon the responsiveness and compatibility of your website with mobile devices! The usage of a banner is only to promote your app and shouldn't be at all a message for the user like "Download our app, our website doesn't work well in mobile devices".
In this article you are going to learn how to implement this feature in your website in case that you have an application for your website, using plugins or even implement a banner by yourself using markup, some CSS and VanillaJS (or jQuery).
1. Using SmartApp Banner
In our opinion, the most useful, easy to use and implement plugin to create a banner to promote your mobile application in your Website. SmartApp banner is a lightweight smart app banner with no jQuery (or any other framework) requirement. Is easy to implement and has a very acceptable design (easy customizable).
The plugin will automatically check wheter is a mobile device or not and will show the banner if applies.
You can get the plugin by downloading a .zip file from the official github repository here or just install the package from npm using npm install --save smart-app-banner.
The following code contains all the options available for the plugin and the way of initialization. Add the css and js file in your document:
<!-- Style -->
<link rel="stylesheet" href="smart-app-banner.css" type="text/css" media="screen">
<!-- Smart Banner Plugin -->
<script src="smart-app-banner.js"></script>Note that the URLs are generated by the plugin (that you can change of course if your read the source code in case that something doesn't work properly as the generation of the URL), therefore you need to provide the app id within a meta tag in the document respectively for every platform:
<!-- App store -->
<meta name="apple-itunes-app" content="app-id=<id-of-your-app>">
<!-- Play Store -->
<meta name="google-play-app" content="app-id=<id.of.your.app>">
<!-- Windows App Store -->
<meta name="msApplication-ID" content="app-id=<id-of-your-app>">And the initialization:
// Initialize Banner
new SmartBanner({
daysHidden: 15, // days to hide banner after close button is clicked (defaults to 15)
daysReminder: 90, // days to hide banner after "VIEW" button is clicked (defaults to 90)
appStoreLanguage: 'us', // language code for the App Store (defaults to user's browser language)
title: 'Our Code Editor',
author: 'Our Code World',
button: 'Download',
store: {
ios: 'On the App Store',
android: 'In Google Play',
windows: 'In Windows store'
},
price: {
ios: 'FREE',
android: 'FREE',
windows: 'FREE'
},
force:'ios',
// Add an icon (in this example the icon of Our Code Editor)
icon: "https://lh3.googleusercontent.com/yyEmckv5badLAHiu8y5rH1ieZNqxeuZOaWPZoj7o3yHujtNWffzZFLeXdOHJ3q2HrIA=w300-rw",
//theme: '', // put platform type ('ios', 'android', etc.) here to force single theme on all device
//icon: '', // full path to icon image if not using website icon image
//force: 'windows' // Uncomment for platform emulation
});The banner in every platform should look like:
2. Using jquery.smartbanner
Smart Banners are used to promote apps on the all the application Stores from a website. This jQuery plugin brings this feature to iOS, Android devices and for Windows Store apps.
Note: jQuery Smart Banner is currently not being actively maintained, however is functional and you could use it and modify by yourself in case you need to.
<meta name="apple-itunes-app" content="app-id=<id-of-your-app>">
<!-- Play Store -->
<meta name="google-play-app" content="app-id=<id.of.your.app>">
<!-- Windows App Store -->
<meta name="msApplication-ID" content="app-id=<id-of-your-app>">
<!-- Add jQuery -->
<script src="http://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<!-- Add the required scripts -->
<link rel="stylesheet" href="/resources/jquery.smartbanner.css" type="text/css" media="screen">
<script src="/resources/jquery.smartbanner.js"></script>
<!-- Start smartbanner -->
<script type="text/javascript">
$(function () {
$.smartbanner({
title: "Our Code Editor Free", // What the title of the app should be in the banner (defaults to <title>)
author: null, // 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
inAmazonAppStore: 'In the Amazon Appstore',
inWindowsStore: 'In the Windows Store', // Text of price for Windows
GooglePlayParams: null, // Aditional parameters for the market
icon: null, // The URL of the icon (defaults to <meta name="apple-touch-icon">)
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: 15, // Duration to hide the banner after being closed (0 = always show banner)
daysReminder: 90, // 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 () {
// alert('Click install');
},
onClose: function () {
// alert('Click close');
}
});
});
</script>In the same way that the first plugin does, you need to add the meta tags with the id of the app in every store. The styles are similar (almost the same) to the banners of the first plugin (as the first plugin is based in this):
3. Self implemented banner with CSS and jQuery
You can even create your own banner without need to depend of any plugin. To achieve a promotion banner like this:
You can see an awesome implementation using some markup, CSS and jQuery in your project. Note that the following example is based in the code of this repository.
The markup will be the following:
<div class="smartbanner" id="smartabanner">
<div class="smartbanner-container">
<a href="#" id="smb-close" class="smartbanner-close">×</a>
<span class="smartbanner-icon"></span>
<div class="smartbanner-info">
<div class="smartbanner-title">Our Code Editor</div>
<div>Our Code World</div>
<span>Free – Google Play</span>
</div>
<a href="https://play.google.com/store/apps/details?id=com.ourcodeworld.ourcodeeditorfree" target="_blank" class="smartbanner-button">
<span class="smartbanner-button-text">Get it</span>
</a>
</div>
</div>And the CSS will be (remember to change the icon source):
.smartbanner {
left:0;top:0;
width:100%;
height:78px;
font-family: "Helvetica Neue", helvetica, arial, sans-serif;
background:#fff;
overflow:hidden;
border-bottom: 1px solid #ccc;
margin-bottom: 10px;
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:none;
}
.smartbanner-container {
margin:0 auto;
}
.smartbanner-close {
position:absolute;
left:7px;top:7px;
display:block;
font-family:'ArialRoundedMTBold',Arial;
font-size:15px;
text-align:center;
text-decoration:none;
border-radius:14px;
-webkit-font-smoothing:subpixel-antialiased;
border:0;
width:17px;
height:17px;
line-height:17px;
color:#b1b1b3;
background:#efefef;
}
.smartbanner-close:active,.smartbanner-close:hover {
color:#333;
}
.smartbanner-icon{
position:absolute;
left:30px;
top:10px;
display:block;
width:57px;
height:57px;
background-color: #fff;
background-size:cover;
background-image: url("https://lh3.googleusercontent.com/yyEmckv5badLAHiu8y5rH1ieZNqxeuZOaWPZoj7o3yHujtNWffzZFLeXdOHJ3q2HrIA=w300-rw");
}
.smartbanner-info{
position:absolute;
left:98px;
top:15px;
width:44%;
font-size:12px;
line-height:1.2em;
font-weight:bold;
color:#999;
}
.smartbanner-title {
font-size:15px;
line-height:17px;
color:#000;
font-weight:bold;
}
.smartbanner-button{
position:absolute;
right:20px;
top:24px;
border-bottom:3px solid #b3c833;
padding:0 10px;
min-width:12%;
height:24px;
font-size:14px;
line-height:24px;
text-align:center;
font-weight:bold;
color:#fff;
background-color:#b3c833;
text-decoration:none;
border-radius:5px;
}
.smartbanner-button:hover {
background-color: #c1d739;
border-bottom:3px solid #8c9c29;
}
.smartbanner-button-text {
text-align:center;
display:block;
padding:0 5px;
}You can add some JS to handle simple actions like the close banner event:
$(function(){
// Hide banner
$('#smb-close').click(function(){
$('#smartabanner').slideUp();
/// Or
//$('#smartabanner').fadeOut(500);
});
});Is up to you to filter with javascript when to show the banner or not according to the platform etc.
As every task in the web development, you need to customize everything to fit into your needs and you are ready to go, have fun !
