Promotions Banner | vendrux Docs

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

NPM 📦

@vendrux/ml-promotions-banner

npm i @vendrux/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);
}

Using a “copy text” function for coupons

// Set banner text with an onclick function in it
const options = {
      textDescription: `Please use code 10OFF for 10% off in your next order!`
}

// Create the copyBannerText function that is linked to the description text, it copies the text, displays a "Copied!" message in that place and then shows the passed text again	
function copyBannerText(e, text){
	navigator.clipboard.writeText(text);
	e.textContent = "Copied!"
	setTimeout( function() {
      e.textContent = text
    }, 3000);
}


  function addPromotionsBanner() {
// Here we can use the deviceData method to display the banner only on desired devices
		new PromotionsBanner(options).init();
  }

  window.addEventListener('load', addPromotionsBanner);

Testing Widgets 🧪

www.vendrux.com/docs/testing-widgets