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 The applause button is distributed as a small JavaScript file and a CSS file: 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.

attribute, e.g. , 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 .

attribute to . 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" />

attribute, e.g. 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).

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).

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.