MobiLoud Smart App Banner Driving traffic to your app from your mobile site is the smartest way to gain new app users and retain mobile visitors. To get these people to down load your app, you can use smart app banners.

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.

What Are Smart App Banners? '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:

smart-app-banner.png

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."

Features ML Smart Banner features:

Configuration options: Banner position Banner delay Texts fonts Texts color Banner BG Text content (for button and heading/description) App icon (the same for Android and Ios) Entering animation Display options: On load or when user scrolls up/down Android and iOS links Button Link applies automatically depending on user agent: If Android, it uses the provided android link if iOS, uses the provided ios link. deviceData method available: its a function that can be called to get the current browser OS, useful for triggering external functions'. It returns a string containing "android" | "ios" | "windows" Fallback App Icon option --> If the provided icon link is invalid / or image can not be displayed, an icon is generated using the App Name Param and Button colors Default options set (if not texts, images or colors provided, it shows placeholder info, useful for catching errors or for testing while implementing the banner) Banner can be used as a module or used directly in an html / script tag Code written in Typescript and minified/bundled with Vite 📖 How to use Smart Banner is loaded via a simple script tag. The new API auto-initializes by default.

🚀 Basic Usage (v2.0)

<!-- Load the script -->
<script src="https://cdn.example.com/ml-smart-banner.min.js"></script>

<!-- Initialize with options (auto-shows) -->
<script>
  MobiLoud.smartBanner({
    buttonText: 'Download',
    textHeading: 'Get Our App!',
    linkIos: 'https://apps.apple.com/your-app',
    linkAndroid: 'https://play.google.com/store/apps/your-app'
  });
</script>

That's it! The widget auto-initializes and displays. Configuration options: 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) headingColor: '#222', // (string) Banner heading 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 }

// With all options: MobiLoud.smartBanner(options);

🎮 Manual Control (Optional) If you need manual control over when the widget shows:

// Don't auto-show
const banner = MobiLoud.smartBanner(options, { autoInit: false });

// Show when ready
banner.show();

// Hide programmatically
banner.hide();

// Remove completely
banner.destroy();

Methods & Properties

MobiLoud.deviceData.os // returns current os "android" | "ios" | "windows" | "desktop"
MobiLoud.deviceData.isCanvas // returns true or false
MobiLoud.deviceData.isMobile // returns true or false
MobiLoud.deviceData.isIOS // returns true or false
MobiLoud.deviceData.isAndroid // returns true or false

Recipes Useful ways to implement the widget with conditional logic:

Show on Mobile Only

if (MobiLoud.deviceData.isMobile) {
  MobiLoud.smartBanner({
    buttonText: 'Download',
    textHeading: 'Get Our Mobile App!'
  });
}

Show on Canvas Platform Only

if (MobiLoud.deviceData.isCanvas) {
  MobiLoud.smartBanner(options);
}

Show on iOS Only

if (MobiLoud.deviceData.isIOS) {
  MobiLoud.smartBanner({
    linkIos: 'https://apps.apple.com/your-app'
  });
}

Show on Android Only

if (MobiLoud.deviceData.isAndroid) {
  MobiLoud.smartBanner({
    linkAndroid: 'https://play.google.com/store/apps/your-app'
  });
}
}

// Apply specific configs based on OS
if(deviceData.os === "android" || deviceData.os === "windows") {
  const smartBanner = new SmartBanner(options1);
} 
if(deviceData.os === "desktop" || deviceData.os === "ios") {
  const smartBanner = new SmartBanner(options2);
}

// Insert widgets only in Mobile userAgent
if(deviceData.isMobile) {
const smartBanner = new SmartBanner(options3);
}
Events
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 clicked
Triggering events based on Smart Banner events
window.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...
});