ku·dos Please

To gain kudos is to earn respect and recognition (Urbandirectory).

A one-element kudos widget with no dependencies.

Works on touch and normal devices.

The widget interacts with the Kudos Please API so you don't have to worry about saving the amount.

1. Insert JS / CSS

JS 
<script src="kudosplease-min.js"></script>
CSS 
<link rel="stylesheet" href="kudosplease-min.css">

2. Insert the widget

HTML 
<div class="kudos" data-amount="0" data-url="domain.tld/my-awesome-article"></div>
  • data-amount - the amount of kudos for a specific url
  • data-url - the url to a specific site which receives the widget (without http://)

3. Create the widget

new KudosPlease({ 
    el : '.kudos',
    duration : 1500,
    persistent : true,
    status : {
      alpha: 'fontelico-emo-shoot',
      beta: 'fontelico-emo-shoot',
      gamma: 'fontelico-emo-beer'
    }
});
  • el - the class of the kudos dom element
  • duration - seconds until the kudos amount is increased
  • persistent - [default: true] enables/disables localStorage to prevent the same user from kudoing the same URL again
  • status - adds a class to the widget which represents the content (e.g. icon) of the widget for every status
    • alpha - amount of 0
    • beta - amount > 0
    • gamma - kudos given (finish)

Persistence disabled

After you reload the page, you can use the widget again. 

new KudosPlease({ 
      el : '.kudos--persistent',
      duration : 1500,
      persistent : false,
      status : {
        alpha: '',
        beta: '',
        gamma: 'fontelico-emo-sunglasses'
      }
  });

Handcrafted 2013 - 2014 by @TimPietrusky.