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

app-banner

v1.4.1

Published

A simple mobile application banner for you website

Downloads

27

Readme

Ombori App Banner

The lightweight mobile application banner for your website

Preview

Mobile

Easy to use, free, open-source configurable application banner for your website.

How does it work?

When a customer visits your site, Desktop users are sent an SMS with a link to download your app. Mobile users are automatically directed to the appropriate app store.

After a user has seen the app install banner, it won’t reappear. This ensures that the UX of your site is not degraded in any way.

Usage

External script

Just include this snippet in your website main page.

<script>
  (function () {
    var appleId = 'id1234567890';
    var googleId = 'com.yourcompany.yourapp';
    var placement = 'bottom-left';
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.id = 'TheAppBanner';
    s.src = 'https://bruce.presencekit.com/p/main.js?&p=' + placement + '&apple=' + appleId + '&google=' + googleId;
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
  })();
</script>

Npm package

Alternatively you can use the App Banner via npm package

npm install --save app-banner
var appBanner = require('app-banner');
// - or -
import appBanner from 'app-banner';

appBanner.init({
  apple: 'id1234567890',
  google: 'com.youcompany.yourapp',
  placement: 'bottom-left',
})

React component

Also you can use the App Banner as a React component

npm install --save app-banner
import AppBanner from 'app-banner/src';

...
<div>
  <AppBanner google="com.youcompany.yourapp" apple="id1234567890" position="bottom-left" />
</div>

Parameters

  • apple or a - App Store ID of your application
  • google or g - Google Play ID of your application
  • placement or p - Banner position on screen. Possible values are 'top-left', 'top-right', 'bottom-left' or 'bottom-right'. Default value is 'bottom-right'. Only applies to desktop version of banner.
  • minimize or m - Banner behaviour when user dismisses the banner. When minimized, the banner will display smaller version of itself instead of completly dissapear. Possible values are 'yes', 'no' and 'mobile'. When 'mobile' is specified, the banner will be minimized if shown on mobile device and completely dissapear on desktop. Default value is 'yes'.
  • noTrack or n - Do not track usage statistics. false by default.
  • text[CC] or t[CC] - Alternate text to display on the desktop banner. CC is two-letter language code like text[en] or text[ru].

Note: shorthand parameters like a, g or p are only supported in script URL when App Banner is used via external script.