Applause

A zero-configuration button for adding
applause / claps to web pages and blog-posts

By Colin Eberhardt
View on GitHub

1. Install the applause button

The applause button is distributed as a small JavaScript file and a CSS file:
$ yarn add applause-button

Alternatively, you can download the distribution files, or serve them, from CDN:

https://unpkg.com/applause-button/dist/applause-button.js
https://unpkg.com/applause-button/dist/applause-button.css

2. Add to your website

Include the Applause button JavaScript and stylesheet in your page, then add the applause-button element, and you're good to go!

<head>
  <!-- add the button style & script -->
  <link rel="stylesheet" href="applause-button.css" />
  <script src="applause-button.js"></script>
</head>
<body>
  <!-- add the button! -->
  <applause-button style="width: 58px; height: 58px;"/>
</body>  

The applause button automatically persists the number of 'claps' given on a page, using a simple cloud-hosted endpoint.

You can see the button in action on the Scott Logic blog.

3. Styling and configuration

A few tips for styling and configuration

  • The button scales to fit, just make sure it is square.
  • You can change the color of the button via its color attribute, e.g. <applause-button color="red" />, or for more flexibility, just apply CSS.
  • By default, users can only clap once. If you'd like them to be able to add multiple 'claps', set the multiclap attribute to true.
  • The applause button determines the URL that it should log a 'clap' for based on the HTTP referrer. If you have multiple URLs that serve the same content, you can specify the URL explicitly via the url attribute, e.g. <applause-button url="google.com" />