Applause Button

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" />
If you want to programmatically access the clap count, the button exposes a initialClapCount property, which returns a Promise which resolves to the initial count (see the source of this page for an example).
If you want to programmatically determine when claps occur, the button fires a clapped event (again, see the source of this page for an example).
If you want to host your own back-end, you can use the api property to point to your end-point. The code for the back-end hosted at api.applause-button.com is open sourced on GitHub.

4. Donate!

The applause button is backed by a lightweight serverless architecture giving it a relatively low running cost, however it does serve around 100,000 requests each day, and this doesn't come for free!

The following table shows the top ten websites that use applause button and the monthly cost of supporting each.

Consumer	Monthly Cost

Please consider donating towards these running costs (approx $50 per month) via the open collective website.

5. Developer API

The applause button is primarily designed to be consumed via the visual component. However, you are welcome to access the APIs that support it, as long as you don't do anything silly!

Here's a brief overview of the API methods, all of which are available via https://api.applause-button.com

GET - /get-claps

Gets the number of claps for a page based on the HTTP Referer header. You can also provide the url via the querystring, however a Referer must still be set (this avoids requests from robots etc ...)

$ curl -e robot https://api.applause-button.com/get-claps?url=applause-button.com/
7963

POST - /get-multiple

Gets the number of claps for multiple pages in a single request, this is the preferred option for retrieving multiple clap counts. The clap counts for up to 100 URLs can be requested as a JSON array, with the results returned in JSON.

$ curl 'https://api.applause-button.com/get-multiple' \
  -H 'Content-Type: text/plain' --data-binary \
'["applause-button.com/", "blog.scottlogic.com/2018/10/19/living-in-an-accessible-world.html"]'
[{"claps":7200,"url":"applause-button.com/"},{"claps":138,"url":"blog.scottlogic.com/2018/10/19/living-in-an-accessible-world.html"}]