Promotions Banner

Display messages inside your apps in an easy and straightfoward way

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

NPM 📦

@mobiloud/ml-promotions-banner

npm i @mobiloud/ml-promotions-banner

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 10OFF', // 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 10OFF', // 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);
}