@mobiloud/ml-promotions-banner

MobiLoud Promotions Banner

Our Promotions Banner widget will allow you to display a message when your website gets displayed inside the apps, so you can provide exclusive app offers to your users.

Here's an example:

Features

ML Promotions Banner features:

• Configuration options:
  • Banner position
  • Banner delay
  • Texts fonts
  • Texts color
  • Banner BG
  • Text content
  • 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"
• 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

Promotions 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/@mobiloud/ml-promotions-banner/dist/ml-promotions-banner.min.js"></script>
<script>
  function addPromotionsBanner() {
    new PromotionsBanner().init();
  }
  window.addEventListener('load', addPromotionsBanner);
</script>

Configuration options:

const options = {
      fontFamily: `"Source Sans Pro", "Arial", sans-serif`, // Font family for banner texts, defaults to system safe fonts
      textColor: '#222', // Banner texts color (any color property value),
      textHeading: 'Get a discount on your first purchase', // Heading Text
      textDescription: 'Use coupon <strong onclick=navigator.clipboard.writeText(this.textContent)>10OFF</strong>', // Description text
      bannerColor: 'white', // Banner BG color
      link: '#', // Link for button
      position: 'top', // 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 in ms
      shadow: true, // If true applies soft shadow, true | false
      useSession: false,
      zindex: 9999999
}

const promotionsBanner = new PromotionsBanner(options);

Methods

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

Recipes

This are useful ways to implement the widget

const options = {
      fontFamily: `"Source Sans Pro", "Arial", sans-serif`, // Font family for banner texts, defaults to system safe fonts
      textColor: '#222', // Banner texts color (any color property value),
      textHeading: 'Get a discount on your first purchase', // Heading Text
      textDescription: 'Use coupon <strong onclick=navigator.clipboard.writeText(this.textContent)>10OFF</strong>', // Description text
      bannerColor: 'white', // Banner BG color
      link: '#', // Link for button
      position: 'top', // 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 in ms
      shadow: true, // If true applies soft shadow, true | false
      useSession: false,
      zindex: 9999999
}

// Insert banner only in our Canvas platform
if(deviceData.isCanvas) {
const promotionsBanner = new PromotionsBanner(options);
}

// Apply specific configs based on OS
if(deviceData.os === "android" || deviceData.os === "windows") {
  const promotionsBanner = new PromotionsBanner({link: 'https://linkOne.com'});
} 
if(deviceData.os === "desktop" || deviceData.os === "ios") {
  const promotionsBanner = new PromotionsBanner({link: 'https://linkTwo.com'});
}

// Insert banner only in Mobile userAgent
if(deviceData.isMobile) {
const promotionsBanner = new PromotionsBanner(options);
}

Development

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

Testing the promotions banner

You will want to test the promotions 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:

License

Copyright (c) MobiLoud