MobiLoud 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:

qr-app-widgets.png

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 App Icon option --> 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 Code written in Typescript and minified/bundled with Vite 📖 How to use QR Widget is loaded via a simple script tag. The new API auto-initializes by default.

🚀 Basic Usage (v2.0)

<!-- Load the script -->
<script src="https://cdn.example.com/ml-qr-widget.min.js"></script>

<!-- Initialize with options (auto-shows) -->
<script>
  MobiLoud.qrWidget({
    textHeading: 'Get 10% OFF!',
    textDescription: 'Scan to download our app',
    qrOptions: {
      text: 'https://redirect.mobiloud.com/?ios=YOUR_IOS_LINK&android=YOUR_ANDROID_LINK',
      size: 200
    }
  });
</script>

That's it! The widget auto-initializes and displays. Configuration options: 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, ues params from this docs: https://quickchart.io/documentation/qr-codes/ text: 'https://redirect.mobiloud.com/?ios=https://itunes.apple.com/&android=https://play.google.com', size: 150, margin: 0 }, qrAlt: 'QR code to download our mobile app', // (string) Alt text for the QR
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) };

// With all options: MobiLoud.qrWidget(options);

🎮 Manual Control (Optional) If you need manual control over when the widget shows:

// Don't auto-show
const widget = MobiLoud.qrWidget(options, { autoInit: false });

// Show when ready
widget.show();

// Hide programmatically
widget.hide();

// Remove completely
widget.destroy();

Methods & Properties

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

Recipes Useful ways to implement the widget with conditional logic:

Show on Desktop Only

if (!MobiLoud.deviceData.isMobile) {
  MobiLoud.qrWidget({
    textHeading: 'Get 10% OFF!',
    textDescription: 'Scan QR code to download',
    qrOptions: {
      text: 'https://redirect.mobiloud.com/?ios=LINK&android=LINK',
      size: 200
    }
  });
}

Show on Canvas Platform Only

if (MobiLoud.deviceData.isCanvas) {
  MobiLoud.qrWidget(options);
}

Show with Different Positions

const options = {
  // Set params here
}

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

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

// Insert widgets only in Mobile userAgent
if(deviceData.isMobile) {
const qrWidget = new QrWidget(options3).init();
}
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

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