Mobile Only

This library allows you to redirect desktop users to mobile by displaying a QR code alongside instructions for the user to follow.

Starting Development

You can use this library by downloading a standalone zip containing the necessary files, by linking to our CDN, or by installing from NPM for use in a webpack project.

Standalone Download

Download the bundle from this link.

Unzip into your web project and reference from your HTML like this:

<script src="zappar-mobileonly.js"></script>


Reference the zappar-mobileonly.js library from your HTML like this:

<script src=""></script>

NPM Webpack Package

Run the following NPM command inside your project directory:

$ npm install --save @zappar/mobile-only

Then import the library into your JavaScript or TypeScript files:

import * as MobileOnly from "@zappar/mobile-only";


Detecting Browsers

The MobileOnly.isMobile() function returns true if a mobile browser is being used:

import * as MobileOnly from "@zappar/mobile-only";
const mobile = MobileOnly.isMobile(); // boolean

User agent can be provided to the isMobile() function, if not specified, navigator.userAgent is used:

import * as MobileOnly from "@zappar/mobile-only";
const mobile = MobileOnly.isMobile('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36');

Displaying the UI

The QR code shown is generated from the current window.location.href.

You can show the redirection UI using MobileOnly.showUI(). This should be used alongside MobileOnly.isMobile():

import * as MobileOnly from "@zappar/mobile-only";

if (!MobileOnly.isMobile()){

The showUI function appends the elements as children of document.body, with z-index of 10000.


showUI() function may be customized using an options parameter. Here's the available options alongside default values:

type Options = {
    header? : string,       // 'Almost there...';
    instructions? : string, // "Use your phone's camera to scan the QR code below";
    footer? : string,       // 'or visit';
    url? : string           //  window?.location?.href || '';


import * as MobileOnly from "@zappar/mobile-only";

if (!MobileOnly.isMobile()){
    url : ''

This shows the following UI:

zapcode branded_zapcode i