Skip to content
Gratipay Widgets + API
JavaScript HTML Nginx Makefile Shell
Find file Builds Deps

Gratipay widgets + widget API

Getting Started with Development


$ git clone
$ cd
$ make run

Then visit http://localhost:9537/test/. For more details, read Development section below.


For now ocumentation for widgets API is present in JSDoc comments, but not generated into more readable format.

Configuration options:

  • window.grtpAPI - Where to look for the API
    • defaults to //
  • window.gratipayURI - Where to look for Gratipay
    • defaults to


In the following examples, just switch out rummik with your Gratipay username.

Standard Widgets

<script data-gratipay-username="rummik"
  src="//" async></script>

<script data-gratipay-username="rummik"
  src="//" async></script>

<script data-gratipay-username="rummik"
  src="//" async></script>

Custom Widgets

You can create your own widgets by adding data-gratipay-widget="custom" to your widget's HTML, and the following classes:

  • Text
    • gratipay-receiving - dollar-sign prefixed value of receiving
    • gratipay-username - the user's username
    • gratipay-goal - dollar-sign prefixed value of goal
    • gratipay-giving - dollar-sign prefixed value of giving
    • gratipay-identity - I if number is singular, We if number is plural
  • Links
    • gratipay-profile-link - sets the href attribute to the user's profile link
    • gratipay-link - sets the href attribute to
  • Misc styling
    • gratipay-goal-progress-bar - sets the element's width to a percentage value of the user's goal progress
<div data-gratipay-username="rummik" data-gratipay-widget="custom">
  I receive <a class="gratipay-profile-link">
    <span class="gratipay-receiving">$0.00</span> / wk
  on <a class="gratipay-link">Gratipay</a>.
<script src="//"></script>

Other Widgets

<img src="">

Google Gadget for Blogger.

Development is a static site. But it is generated from sources.

Typical site like is divided into backend and frontend. backend is Python code that runs on server side. frontend is HTML+CSS+Javascript that is processed by browser. is pure frontend, but its HTML+CSS+Javascript sources from repository are not what is being run on the site. Before sources can be deployed, they need to be minified, tested and, if you wryte styles in SASS, the .sass files need to be compiled into CSS. So repository layout looks like:

lib/   - source files that need to be compiled
www/   - static files that are copied as-is

Javascript tools to build, lint and test source are similar to Python tools. This can be matched approximately as this:

JavaScript     |  Python
npm            |  pip
package.json   |, setup.cfg, requirements.txt
Grunt          |  make, fabric, SCons
Gruntfile.js   |  Makefile,, SConstruct

Grunt is popular JS build systems, and there are many others, like Gulp for example. It should be noted that npm itself has some kind of dependency management, so you may not need Grunt at all.

Release and Deployment is hosted on a Digital Ocean VPS (called droplet) accessible through SSH. It runs nginx and the publishing root is /home/

To access the server, you need someone who already has access to add your key to /home/


If you need to alter nginx configuration, it is stored at /etc/nginx/sites-enabled/

After you make changes, you can reload configuration:

# service nginx reload


Bump version in package.json and create new tag.

Add the remote to your own local repo:

$ git remote add prod

Then you can git push prod. There's a post-receive hook that updates the filesystem on the droplet and runs the grunt build task that minifies code and copies files from lib to www.


In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using grunt.

To help keep a consistent style, we also recommend using EditorConfig.


Released into the public domain (per CC0).

Something went wrong with that request. Please try again.