QR Widget

Promoting your app to desktop users to drive more app installs is also a great option, for this we recommend using our own QR Code Widget.

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 mobile 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 <body></body> tags:

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

NPM 📦

@mobiloud/ml-qr-widget

npm i @mobiloud/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 MobiLoud 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.mobiloud.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
    };


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);
}

Redirect URL 🔗

We have a custom URL For redirecting users to the correct store with only one link. For doing it, you can use this Link:

https://redirect.mobiloud.com/

this accepts 2 parameters: ?ios , ?android. This parameters should contain a url for each of the stores, when the user opens the redirect link on their phone, it will take them to the correct store like so:

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