Display a ribbon when running your website in a non-production host.
Switch branches/tags
Nothing to show
Latest commit c085e50 Dec 15, 2013 @raul raul bower.json - fixes #1
Failed to load latest commit information.
README.md README formatting Oct 29, 2012
bower.json bower.json - fixes #1 Dec 15, 2013
staging-ribbon.js First commit Oct 29, 2012


Staging Ribbon

Tired of confusing your production environment with your development/staging ones?

Staging Ribbon displays a special ribbon when it runs in a non-production host.

Basic usage

The required productionHost parameter indicates your production host. A ribbon will be displayed when running on any other host:

    stagingRibbon({productionHost: 'your-app.com'});

You'll want to run this when your HTML code is loaded in the client:

    // Plain JavaScript:
    window.onload = function() {
      stagingRibbon({productionHost: 'your-app.com'});
      // your other stuff...

    // Using jQuery:
    $(function() {
      stagingRibbon({productionHost: 'your-app.com'});
      // your other stuff...

Basic options

The following options allow to customize the ribbon:

  • content: Text for the ribbon.
  • favicon: URL of an alternative favicon, makes easier to identify your production instance in browser tabs
  • placement: where the ribbon will be displayed, valid values: "top-right" (default), "top-left" and "top".
  • style: object including CSS properties and their values to customize the ribbon.


    stagingRibbon({productionHost: 'your-app.com', content: 'your text'});
    stagingRibbon({productionHost: 'your-app.com', favicon: 'http://your-staging-app.com/favicon.ico'});
    stagingRibbon({productionHost: 'your-app.com', placement: 'top'});
    stagingRibbon({productionHost: 'your-app.com', style: {color: 'white', background: 'red'});


Fallback for browsers without CSS-transform support when using "top-right" and "top-left" options.

Author, License

MIT License - Raul Murciano http://raul.murciano.net raul@murciano.net