npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@mobiloud/ml-qr-widget

v1.0.3

Published

Mobiloud QR widget

Downloads

7

Readme

Version Static Badge

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 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, between the tags:

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

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

Development

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

Testing the QR widgets

You will definitely want to test the QR widgetss once you deploy them to your website, to make sure that everything works and looks as you want.

Running these tests on real mobile devices can get overwhelming, so we recommend that you run your tests on your desktop browser.

To do this, you will need to emulate a mobile device by adjusting your browser’s user agent. We recommend using the following Chrome extension to do this: User Agent Switcher and Manager

Once you have installed the extension, set it up as follows:

Step 1

Select “Chrome” as the browser and “Android” as the platform if you want to test the Android version of the widgets, or “Safari” and “iOS” in case you want to test the iOS version:

annotely_image (61).png

Step 2

Select one of the options that will appear, any will work:

annotely_image (62).png

Step 3

Click “Apply” to make sure the user agent is properly set up on your browser:

annotely_image (63).png

Step 4

You can now press “F5” while viewing your website to refresh the browser window with the updated user agent.

Reset

If you want to revert the changes to the user agent, as some websites might start behaving differently after doing so, you can click the “Reset” button:

annotely_image (64).png

License

Copyright (c) MobiLoud