Configure Smart App Banners

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 download 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:

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.
getMobileOs 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 can be used importing the JS code via CDN or as a module using NPM

🚀 With CDN

<script type="module" src="https://cdn.jsdelivr.net/npm/ml-smart-banner/dist/ml-smart-banner.min.js"></script>
<script>
  function addSmartBanner() {
    new SmartBanner().init();
  }
  window.addEventListener('load', addSmartBanner);
</script>

Configuration options:

const options = {
    fontFamily: `"Source Sans Pro", "Arial", sans-serif`, // Font family for banner texts, defaults to system safe fonts
    fallbackFontFamily: 'sans-serif', // Font family for fallback icon, safe options are serif and sans-serif
    appName: 'ML', // Initials for fallback icon.  Reccommended 2 characters. Fallback Image uses button text and bg color
    textColor: '#222', // Banner texts color (any color property value)
    buttonColor: '#222', // Button color (any background property value)
    buttonText: 'Download', // Button text
    buttonTextColor: '#fff', // Button Text Color (any color property value)
    iconUrl: '', // Icon url, defaults to avatar with appName
    textHeading: 'Download now!', // Heading Text
    textDescription: 'Try it now, download today', // Description text
    bannerColor: '#fff', // Banner BG color
    linkIos: 'https://itunes.apple.com/', // Link for iOS 
    linkAndroid: 'https://play.google.com/', // Link for Android 
    position: 'bottom', // Position of the banner, default 'top'. 'top' | 'bottom'
    animation: 'fadeIn', // Banner animation, default 'fadeIn'. 'fadeIn' | 'scaleUp' | 'slideBottom' | 'slideTop' | 'slideLeft' | 'slideRight' | null,
    display: 'onLoad', // Display options, default 'onLoad'. 'onLoad' | 'onScrollDown' | 'onScrollUp'
    radius: '0', // Banner radius with units
    delay: 0, // defines how much time to wait until the element shows up
    shadow: true // If true applies soft shadow, true | false
}

const smartBanner = new SmartBanner(options);

Methods

getMobileOS

Returns current OS, useful for knowing the user OS and triggering functions depending on that

const smartBanner = new SmartBanner(options);
smartBanner.getMobileOS()

Development

npm run build produces a production version into /dist folder
npm run dev runs dev version and starts a dev server

Testing the smart app banner

You will definitely want to test the smart app banners once you deploy them to your website, to make sure that everything works and looks as you want.

Running these tests on real mobile devices can get overwhelming, so we recommend that you run your tests on your desktop browser.

To do this, you will need to emulate a mobile device by adjusting your browser’s user agent. We recommend using the following Chrome extension to do this: User Agent Switcher and Manager

Once you have installed the extension, set it up as follows:

Step 1

Select “Chrome” as the browser and “Android” as the platform if you want to test the Android version of the banner, or “Safari” and “iOS” in case you want to test the iOS version:

Step 2

Select one of the options that will appear, any will work:

Step 3

Click “Apply” to make sure the user agent is properly set up on your browser:

Step 4

You can now press “F5” while viewing your website to refresh the browser window with the updated user agent.

Reset

If you want to revert the changes to the user agent, as some websites might start behaving differently after doing so, you can click the “Reset” button:

‍