Category: Widgets

The QR Code Widget allows you to promote app-specific features, and discounts, followed by a QR code that can be scanned to open your app install page on mobile devices.

What Are QR Widgets?

QR widgets are modals/popups that show up when someone lands on your desktop website, prompting them to get your app.

Here’s an example:

Features ✨

ML QR Widget features:

• Configuration options:
  • Widget position
  • Widget delay
  • Texts fonts
  • Texts color
  • Widget BG
  • QR colors
  • QR with images
  • Text content
  • Entering animation
  • Display options: On load or when user scrolls up/down
• Fallback options –> 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 widgets)
• Widget can be used as a module or used directly in an html / script tag
• The library uses QuickChart’s QR Library, methods from their API are available to use within the widget
• Code written in Typescript and minified/bundled with Vite

How to use 📖

QR Widget can be used importing the JS code via CDN or as a module using NPM

With CDN 🚀

In order to install the QR Code Widget you will want to add the following piece of code into your website, before closing   tags:

  script type="module" src="https://cdn.jsdelivr.net/npm/@vendrux/ml-qr-widget@latest/dist/ml-qr-widget.min.js">script>
  script>
    function addQrWidget() {
      new QrWidget().init();
    }
    window.addEventListener('load', addQrWidget);
  script>

NPM 📦

@vendrux/ml-qr-widget

npm i @vendrux/ml-qr-widget

Configuration options ⚙️

To learn options available within qrOptions param, reference this: QuickChart’s QR Library,

const options = {
   fontFamily: `"Source Sans Pro", "Arial", sans-serif`, // (string) Font family for widgets texts, defaults to system safe fonts
      textColor: '#222', // (string) Widget texts color (any color property value)
      textHeading: 'Get 10% OFF using Vendrux app', // (string) Heading Text
      textDescription: 'Scan our QR to download the app on your device and unlock the discount', // (string) Description text
      widgetsColor: '#fff', // (string) Widget BG color
      backDrop: true,// (boolean) if true, adds a backdop in front of the page
      backDropZIndex: 888888, // (number) z-index of the backdrop, should be lower than widgets z-index
      qrOptions: { // Params for the QR Generation, uses params from this docs: https://quickchart.io/documentation/qr-codes/
        text: "https://redirect.vendrux.com/?ios=https://itunes.apple.com/",
        size: 150,
        margin: 0
      },     
      position: 'center', // (string) Position of the widgets, default 'center'. 'center' | 'top-right' | 'top-left' | 'bottom-left' | 'bottom-right'
      animation: 'fadeIn', // (string) Widget animation, default 'fadeIn'. 'fadeIn' | 'scaleUp' | 'slideBottom' | 'slideTop' | 'slideLeft' | 'slideRight' | null,
      display: 'onLoad', // (string) Display options, default 'onLoad'. 'onLoad' | 'onScrollDown' | 'onScrollUp'
      radius: '10px', // (string) Widget radius with CSS 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: false, // (boolean) If true, after widgets is closed, it creates a session registry to hide widgets on page reloads until the end of user's session
      zindex: 999999, // (number) Widget z-index
      maxWidth: "400px", // (string) Max Width of the widgets with CSS units
      sessionExpire: 1440 // (number) time for banner to show again in minutes starting from the time the banner is shown, defualt: 1440 (1 day)
   
    };


const qrWidget = new QrWidget(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. We always recommend using an Event Listener to trigger the code when the document is loaded window.addEventListener('load', fnName)

Insert QR Banner on desktop only

function addQrWidget() {
	if(deviceData.isMobile || deviceData.isCanvas ){
		return
	}
    new QrWidget(options).init();
  }
  window.addEventListener('load', addQrWidget);

Using deviceData method to filter devices

const options = {
  // Set params here
}

// Insert widgets only in our Canvas platform
if(deviceData.isCanvas) {
	const qrWidget = new QrWidget(options);
}

// Apply specific configs based on OS
if(deviceData.os === "android" || deviceData.os === "windows") {
  const qrWidget = new QrWidget(options1); // different options sets can be passed for different platforms
} 
if(deviceData.os === "desktop" || deviceData.os === "ios") {
  const qrWidget = new QrWidget(options2);
}

// Insert widgets only in Mobile userAgent
if(deviceData.isMobile) {
	const qrWidget = new QrWidget(options3);
}

‍

How Banner Session works

When ‘useSession’ parameter is set to true, the banners appears once until the banner is closed, after closed, the banner won’t appear until the next day (default) or until the time configured in the ‘sessionExpire’ parameter, this parameter should have the time in minutes.

1. If user closes the modal, it creates a LocalStorage key called “widgetClosed” with a date value (for example if we set up the sessionExpire value to 1440 (minutes), it would hide until tomorrow)

2. On widget init(), the library checks if the param exists and if the date is bigger than current date

3. If the expiration date already passed, the key is removed from storage and widget is shown again

‍

Redirect URL 🔗

We provide a custom redirect URL that sends users to the correct app store using a single link.

To use it, simply format the URL like this:

https://redirect.vendrux.com/?ios=IOS_URL&android=ANDROID_URL

Parameters:

• ios: URL for iOS devices (e.g., App Store link)
• android: URL for Android devices (e.g., Google Play link)
• redirect: this performs a redirect to a new URL for every platform
• buttonColor: this accepts an hex value (without the ‘#’)

when the user open the redirect link on their phone, it will take them to the correct store like so:

[Example] ios & android redirect:

These parameters are used for automatically redirecting users to the correct store depending on their device.

https://redirect.vendrux.com/?android=https://linkToPlaystore.com&ios=https://linkToAppStore.com

[Example] redirect & button color:

When a redirect to a new page is needed for every platform, the ?redirect parameter can be used along with ?buttonColor.

https://redirect.vendrux.com/?redirect=https://shorturl.at/OWKx&buttonColor=00376e

‍

‍

Testing Widgets 🧪

www.vendrux.com/docs/testing-widgets

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

The ML Popup Widget makes it easy to prompt users with a native-style popup when their app version is outdated. This keeps your user base on the latest, most secure version of your app.

By effectively utilizing update popups, you can drive app engagement, improve user satisfaction, and ultimately increase your app’s success.

This element can also be used as a normal popup to add a custom UI ele

ment and a different experience in your app.

What This Widget Does

The widget checks the user’s app version and displays a popup only if it’s older than your defined minimum version. This works inside mobile apps or webviews, and uses native-feeling styling that resembles iOS or Android prompts.

It also works as a normal popup to provide your users a nice User Experience.

The popup includes:

• A custom heading, description, and CTA button
• Links to the relevant App Store / Play Store
• Optional blurred backdrop, animations, and more
• Conditional display based on app version

Copy Directly Into Your Site 📄

Paste the following code at the end of your page’s . This popup will show only when the user’s app version is older than your defined minimum version (minVersion), in this code we set the closable param to false, ensuring the popup is not dismissable. Full list of options at the end of this guide:

 src="">
script>
  const popupOptions = {
    popupStyle: 'ios',
    fontFamily: `"Source Sans Pro", "Arial", sans-serif`,
    textColor: '#222',
    textHeading: 'Upgrade required',
    textDescription: 'This app is out of date, please visit store to upgrade to the latest version',
    buttonText: 'Download new version',
    buttonColor: '#000000',
    buttonTextColor: "#ffffff",
    widgetColor: '#fff',
    backDrop: true,
    backDropBlur: true,
    backDropZIndex: 888888,
    zIndex: 999999,
    position: 'center',
    animation: 'fadeIn',
    display: 'onLoad',
    radius: '10px',
    delay: 0,
    shadow: true,
    useSession: false,
    maxWidth: "700px",
    closable: false,
    padding: '20px',
    linkIos: 'https://itunes.apple.com/?PATH-TO-YOUR-APP',
    linkAndroid: '',
  };

  function addPopupWidget() {
  // Checks if current device is a phone  (deviceData.isMobile) and if its the app (deviceData.isCanvas)
    if (deviceData.isMobile || deviceData.isCanvas) {
      const minVersion = 1.0;
      // Gets current app version
      const appVersion = nativeFunctions.getDeviceInfo().appVersion;
      // Compares the minimum required version with the current app version
      // if appVersion 
      const isOutdated = deviceData.compareAppVersion(minVersion, appVersion);
			
      if (isOutdated) {
      // Triggers the widget
        new PopupWidget(popupOptions).init();
      }
    }
  }

  window.addEventListener('load', addPopupWidget);
script>

// returns true if its an ios or anroid device
deviceData.isMobile

// returns 'ios', 'android' or 'windows'
deviceData.os

// Returns true if using the app
deviceData.isCanvas

// Accepts two params (numbers)
// if appVersion 

deviceData.compareAppVersion(minVersion, appVersion)

// CANVAS PLATFORM METHODS

// Returns an object with app metadata and info
nativeFunctions.getDeviceInfo()

/*
mobiloudAppInfo = {
	appId = string,
	appVersion = string,
	brand = string,
	hardware = string,
	manufacturer = string,
	model = string,
	nameos = string,
	osVersion = string,
	platform = string,
	pushSubscribed = bool,
	pushToken = string,
	pushUserId = string,
	timeZone = string
}
*/

The ML Popup Widget makes it easy to prompt users with a native-style popup when their app version is outdated. This keeps your user base on the latest, most secure version of your app.

By effectively utilizing update popups, you can drive app engagement, improve user satisfaction, and ultimately increase your app’s success.

This element can also be used as a normal popup to add a custom UI ele

ment and a different experience in your app.

What This Widget Does

The widget checks the user’s app version and displays a popup only if it’s older than your defined minimum version. This works inside mobile apps or webviews, and uses native-feeling styling that resembles iOS or Android prompts.

It also works as a normal popup to provide your users a nice User Experience.

The popup includes:

• A custom heading, description, and CTA button
• Links to the relevant App Store / Play Store
• Optional blurred backdrop, animations, and more
• Conditional display based on app version

Copy Directly Into Your Site 📄

Paste the following code at the end of your page’s . This popup will show only when the user’s app version is older than your defined minimum version (minVersion), in this code we set the closable param to false, ensuring the popup is not dismissable. Full list of options at the end of this guide:

 src="">
script>
  const popupOptions = {
    popupStyle: 'ios',
    fontFamily: `"Source Sans Pro", "Arial", sans-serif`,
    textColor: '#222',
    textHeading: 'Upgrade required',
    textDescription: 'This app is out of date, please visit store to upgrade to the latest version',
    buttonText: 'Download new version',
    buttonColor: '#000000',
    buttonTextColor: "#ffffff",
    widgetColor: '#fff',
    backDrop: true,
    backDropBlur: true,
    backDropZIndex: 888888,
    zIndex: 999999,
    position: 'center',
    animation: 'fadeIn',
    display: 'onLoad',
    radius: '10px',
    delay: 0,
    shadow: true,
    useSession: false,
    maxWidth: "700px",
    closable: false,
    padding: '20px',
    linkIos: 'https://itunes.apple.com/?PATH-TO-YOUR-APP',
    linkAndroid: '',
  };

  function addPopupWidget() {
  // Checks if current device is a phone  (deviceData.isMobile) and if its the app (deviceData.isCanvas)
    if (deviceData.isMobile || deviceData.isCanvas) {
      const minVersion = 1.0;
      // Gets current app version
      const appVersion = nativeFunctions.getDeviceInfo().appVersion;
      // Compares the minimum required version with the current app version
      // if appVersion 
      const isOutdated = deviceData.compareAppVersion(minVersion, appVersion);
			
      if (isOutdated) {
      // Triggers the widget
        new PopupWidget(popupOptions).init();
      }
    }
  }

  window.addEventListener('load', addPopupWidget);
script>

// returns true if its an ios or anroid device
deviceData.isMobile

// returns 'ios', 'android' or 'windows'
deviceData.os

// Returns true if using the app
deviceData.isCanvas

// Accepts two params (numbers)
// if appVersion 

deviceData.compareAppVersion(minVersion, appVersion)

// CANVAS PLATFORM METHODS

// Returns an object with app metadata and info
nativeFunctions.getDeviceInfo()

/*
mobiloudAppInfo = {
	appId = string,
	appVersion = string,
	brand = string,
	hardware = string,
	manufacturer = string,
	model = string,
	nameos = string,
	osVersion = string,
	platform = string,
	pushSubscribed = bool,
	pushToken = string,
	pushUserId = string,
	timeZone = string
}
*/

A ‘Back Button’ in your app is essential for user experience, providing a quick and intuitive way to backtrack through a series of actions or views. Without a back button, users might feel disoriented or frustrated trying to navigate within the app.

This library provides a web based widget that replicates the native look and feel provided by the iOS and Android SDKs. The purpose is to add navigation options to a web app when running in a native app container, like what Vendrux provides.

Here’s an example:

Features ✨

ML Back Button features:

• Configuration options:
  • Button text/label
  • Button colors
  • Position and animation
  • Display options: when user scrolls screen, on page load
  • Basic style settings, extensible with CSS
  • Options to replace elements and attach button to a container
  • Regex / url filtering, to avoid displaying the button in certain pages
• 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 Button)
• Button 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 📖

ml-back-button 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-back-button@latest/dist/ml-back-button.min.js">script>
script>
  function addBackButton() {
  	new BackButton().init();
  }
  window.addEventListener('load', addBackButton);
script>

NPM 📦

@vendrux/ml-back-button

npm i @vendrux/ml-back-button

Configuration options ⚙️

	const options = {
/** Sets the button text color (if string is used in label); Example '#fff'*/
  textColor: string,
  /** Sets the button fill color (if svg is used in label); Example '#000'*/
  fillColor: string,
  /** Sets the button background color (if svg is used in label); Example '#000'*/
  buttonColorPrimary: string, 
  /** Sets the button label; Example 'Back', ''*/
  label: string,
  /** Sets the button position when floating: 'top-right' | 'top-left' | 'bottom-left' | 'bottom-right' */
  position: 'top-right' | 'top-left' | 'bottom-left' | 'bottom-right',
  /** Sets the button entrance animation: 'fadeIn' | 'scaleUp' | 'slideBottom' | 'slideTop' | 'slideLeft' | 'slideRight' | null */
  animation: 'fadeIn' | 'scaleUp' | 'slideBottom' | 'slideTop' | 'slideLeft' | 'slideRight' | null, 
  /** Sets the button display type: 'onLoad' | 'onScrollDown' | 'onScrollUp' */
  display: 'onLoad' | 'onScrollDown' | 'onScrollUp', 
  /** Sets the button radius: css unit, 50% gives a rounded btn if same height/width; Example '50%' */
  radius: string,
  /** Sets the button width: css unit; Example '20px' */
  width: string,
  /** Sets the button inner padding: css unit; Example '1em' */
  padding: string,
  /** Defines how much time to wait until the element shows up (in ms); Example 1000 */
  delay: number, 
  /** If not null, button is injected into a container, it uses any html selectors; Example '.class', '#id', null  */
  containerSelector: string | null, 
  /** If container selector activated, it places the button before or after other elements; Example 'first' | 'last' | null */
  containerOrder: 'first' | 'last' | null,
  /** Sets text alignment, button has a flex container; Example 'center' | 'start' | 'end' */
  textAlign: 'center' | 'start' | 'end',
  /** If true applies soft shadow; Boolean */
  shadow: boolean,
  /** if a selector is placed here, this element would be replaced with the back button; Example '.className' '#idName' */
  replaceElement:  string | null,
  /** uses regex to avoid injecting button in certain pages; Example /(?:\/|\/home|\/someUrl|\/about|\/categories\/clothing)/ */
  regex: string | null,
  /** Display or not logs, useful when developing; Boolean */
  logs: boolean  
}

const BackButton = new BackButton(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. We always recommend using an Event Listener to trigger the code when the document is loaded window.addEventListener('load', fnName)

Insert Back Button – desktop only

function addBackButton() {
	if(deviceData.isMobile || deviceData.isCanvas ){
		return
	}
    new BackButton(options).init();
  }
window.addEventListener('load', addBackButton);

Using deviceData method to filter devices

const options = {
  // Set params here
}

// Insert widgets only in our Canvas platform
if(deviceData.isCanvas) {
	const backButton = new BackButton(options);
}

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

// Insert widgets only in Mobile userAgent
if(deviceData.isMobile) {
	const backButton = new BackButton(options3);
}

Testing Widgets 🧪

www.vendrux.com/docs/testing-widgets