We highly recommend promoting your app using smart app banners – with these you’ll show a banner suggesting to install your app only to your website visitors using either an iOS or an Android device.
Read on to learn more about smart banners, and how to implement a smart app banner on your site.
'Smart App Banners' are banners that show up when someone lands on your mobile website, prompting them to get your app.
Here's an example:
Here's what Apple's own help pages say about smart app banners:
"Smart App Banners vastly improve users’ browsing experience compared to other promotional methods. Users will trust that tapping the banner will take them to the App Store and not a third-party advertisement. They will appreciate that banners are presented unobtrusively at the top of a webpage, instead of as a full-screen ad interrupting the web content. And with a large and prominent close button, a banner is easy for users to dismiss. When the user returns to the webpage, the banner won’t reappear."
ML Smart Banner features:
Smart Banner can be used importing the JS code via CDN or as a module using NPM
Just copy & paste this code at the end of the <body> tag in your site. Modify the values accordingly. You probably want to change the values for:
appName
: 2 initials from your brand, this is a fallback for the app logobuttonColor
: An HEX value, a good idea is to use your brand's primary coloriconUrl
: Your app's logo, you can go to the store page and right click in the logo and copy that image URLtextHeading
/ textDescription
: Banner text contentlinkIos
/ linkAndroid
: the stores links, the banner will redirect the user to the correct store depending on their device<script type="module" src="https://cdn.jsdelivr.net/npm/@mobiloud/ml-smart-banner@latest/dist/ml-smart-banner.min.js"></script>
<script>
const SBoptions = {
fontFamily: `"Source Sans Pro", "Arial", sans-serif`, // (string) Font family for banner texts, defaults to system safe fonts
fallbackFontFamily: 'sans-serif', // (string) Font family for fallback icon, safe options are serif and sans-serif
appName: 'ML', // (string) Initials for fallback icon. Recommended 2 characters. Fallback Image uses button text and bg color
textColor: '#222', // (string) Banner texts color (any color property value)
buttonColor: '#000000', // (string) Button color (any background property value)
buttonText: 'Download', // (string) Button text
buttonTextColor: '#fff', // (string) Button Text Color (any color property value)
iconUrl: 'https://is1-ssl.mzstatic.com/image/thumb/Purple113/v4/c4/a1/70/c4a1704e-ed21-abde-cc5b-20c33be2c6a7/AppIcon-0-0-1x_U007emarketing-0-0-0-7-0-0-sRGB-0-0-0-GLES2_U002c0-512MB-85-220-0-0.png/230x0w.webp', // (string) Icon url, defaults to avatar with appName. You can use the app logo in the appstore/playstore
textHeading: 'Download our App!', // (string) Heading Text
textDescription: 'Get it now, download today', // (string) Description text
bannerColor: '#fff', // (string) Banner BG color
linkIos: 'https://apps.apple.com', // (string) Link for iOS
linkAndroid: 'https://play.google.com', // (string) Link for Android
position: 'bottom', // (string) Position of the banner, default 'top'. 'top' | 'bottom'
animation: 'fadeIn', // (string) Banner animation, default 'fadeIn'. 'fadeIn' | 'scaleUp' | 'slideBottom' | 'slideTop' | 'slideLeft' | 'slideRight' | null,
display: 'onLoad', // (string) Display options, default 'onLoad'. 'onLoad' | 'onScrollDown' | 'onScrollUp'
radius: '0', // (string) Banner radius with units
delay: 0, // (number) defines how much time to wait until the element shows up
shadow: true, // (boolean) If true applies soft shadow, true | false
useSession: true, // (boolean) If true, after closed, Banner is not shown upon page reload. Default: true
zindex: 999999 // (number) Sets the z-index of the element
}
function addSmartBanner() {
// only shows the banner in mobile devices & if not the app
if(!deviceData.isMobile || deviceData.isCanvas ){
return
}
new SmartBanner(SBoptions).init();
}
window.addEventListener('load', addSmartBanner);
</script>
npm i @mobiloud/ml-smart-banner
const options = {
fontFamily: `"Source Sans Pro", "Arial", sans-serif`, // (string) Font family for banner texts, defaults to system safe fonts
fallbackFontFamily: 'sans-serif', // (string) Font family for fallback icon, safe options are serif and sans-serif
appName: 'ML', // (string) Initials for fallback icon. Recommended 2 characters. Fallback Image uses button text and bg color
textColor: '#222', // (string) Banner texts color (any color property value)
buttonColor: '#222', // (string) Button color (any background property value)
buttonText: 'Download', // (string) Button text
buttonTextColor: '#fff', // (string) Button Text Color (any color property value)
iconUrl: '', // (string) Icon url, defaults to avatar with appName
textHeading: 'Download now!', // (string) Heading Text
textDescription: 'Try it now, download today', // (string) Description text
bannerColor: '#fff', // (string) Banner BG color
linkIos: 'https://itunes.apple.com/', // (string) Link for iOS
linkAndroid: 'https://play.google.com/', // (string) Link for Android
position: 'bottom', // (string) Position of the banner, default 'top'. 'top' | 'bottom'
animation: 'fadeIn', // (string) Banner animation, default 'fadeIn'. 'fadeIn' | 'scaleUp' | 'slideBottom' | 'slideTop' | 'slideLeft' | 'slideRight' | null,
display: 'onLoad', // (string) Display options, default 'onLoad'. 'onLoad' | 'onScrollDown' | 'onScrollUp'
radius: '0', // (string) Banner radius with units
delay: 0, // (number) defines how much time to wait until the element shows up
shadow: true, // (boolean) If true applies soft shadow, true | false
useSession: true, // (boolean) If true, after closed, Banner is not shown upon page reload. Default: true
zindex: 999999 // (number) Sets the z-index of the element
}
const smartBanner = new SmartBanner(options);
deviceData.os // returns current os "android" | "ios" | "windows" | "desktop"
deviceData.isCanvas // returns true or false
deviceData.isMobile // returns true or false
This are useful ways to implement the widget. We always recommend using an Event Listener to trigger the code when the document is loaded window.addEventListener('load', fnName)
function addSmartBanner() {
if(!deviceData.isMobile || deviceData.isCanvas ){
return
}
new SmartBanner(options).init();
}
window.addEventListener('load', addSmartBanner);
const options = {
// Set params here
}
// Insert widgets only in our Canvas platform
if(deviceData.isCanvas) {
const smartBanner = new SmartBanner(options).init();
}
// Apply specific configs based on OS
if(deviceData.os === "android" || deviceData.os === "windows") {
const smartBanner = new SmartBanner(options1).init();
}
if(deviceData.os === "desktop" || deviceData.os === "ios") {
const smartBanner = new SmartBanner(options2).init();
}
// Insert widgets only in Mobile userAgent
if(deviceData.isMobile) {
const smartBanner = new SmartBanner(options3).init();
}
The library emits some useful events in the browser window, these can be used to trigger custom functions using event listeners.
BANNER_CLOSED
: Triggered when close button is clicked, banner gets unmounted from page also.BANNER_MOUNTED
: Triggered when banner is mounted in page, on init()
it gets unmounted as a cleanup and then mounted.BANNER_UNMOUNTED
: Triggered when banner is mounted in unmounted, this is triggered on close or when firing unmount()
,BANNER_LINK_CLICKED
: Triggered when banner link is clickedwindow.addEventListener('BANNER_MOUNTED', () => {
console.log('banner opened');
// trigger something...
});
window.addEventListener('BANNER_CLOSED', () => {
console.log('banner closed');
// trigger something...
});
window.addEventListener('BANNER_UNMOUNTED', () => {
console.log('banner unmounted');
// trigger something...
});
window.addEventListener('BANNER_LINK_CLICKED', () => {
console.log('banner link clicked');
// trigger something...
});
Testing Widgets 🧪