A tiny clap button for any page.

Install

The server hands you this tag when you create a button. Paste it where the button should appear.

<script src="https://your-instance.example/widget.js" data-key="pk_…" async></script>

• The bundle finds its server from its own src. Nothing to configure on the page.
• Counts are per page automatically: origin + path, query string and fragment ignored.
• 9 KB, no dependencies, works in any HTML page, CMS, or framework.

Let your agent add it

Using Claude Code, Cursor or another coding agent? Paste this prompt into it. It asks for your button's key, then puts the tag at the end of your post template, and that's it. The dashboard has the same prompt for each button with its key filled in. Your part: make sure the site's address is in the button's allowed origins.

Loading the prompt…

Works with your platform

Step-by-step guides with the exact file to edit, for a like or clap button on every post:

• Plain HTML
• WordPress
• Ghost
• Hugo
• Jekyll and GitHub Pages
• Eleventy
• Astro
• Next.js and React

Make it yours

The icon and its four colours live on the server, so every site that embeds a button sees the same thing. A page can still override colours and size with plain CSS; the count and the spacing grow with the icon.

appreciate-button {
  --appreciate-size: 2.5rem;
  --appreciate-full: gold;
  --appreciate-clicked: orange;
}

appreciate-button {
  --appreciate-default: currentColor;
  --appreciate-hover: currentColor;
  --appreciate-clicked: currentColor;
  --appreciate-full: currentColor;
}

<appreciate-button
  data-key="pk_…"
  data-label="Clap for this">
appreciate-button {
  --appreciate-size: 3rem;
}

Where the count goes

Put data-count on the tag to place the number on any side of the icon. It defaults to right.

<script src="https://your-instance.example.com/widget.js"
  data-key="pk_…" data-readonly async></script>

Want a different icon? Any single-colour outline SVG works: a CLI strips its colours so the four states can restyle it. Icons that need four different drawings can be supplied as four SVGs.

Listen to it

The button tells the page what happens through DOM events. They bubble and cross its shadow root, so one listener on document hears every button on the page: event.target is the button, and event.detail carries the data. All of them are optional; the button works the same whether anything listens or not.

The counts are { totalCount, maxClicks, visitorCount, visitorRemaining, maxed }: the total from everyone, this visitor's cap, how many they have used and have left, and whether they are out.

<script>
  document.addEventListener('appreciate:ready', (event) => {
    console.log('loaded with', event.detail.totalCount);
  });
  document.addEventListener('appreciate:burst', (event) => {
    console.log('clicked', event.target, event.detail.totalCount);
  });
  document.addEventListener('appreciate:maxed', () => {
    console.log('all clicks used, say thanks');
  });
  document.addEventListener('appreciate:error', (event) => {
    console.warn(event.detail.code, event.detail.message);
  });
</script>

How it works

1. The tag loads the bundle from your instance and renders a <appreciate-button> in a shadow root, isolated from the page's CSS.
2. It fetches the button config and the page's counts in parallel, painting from a small localStorage cache first so there is no flash.
3. Each click is sent one at a time. The server increments inside a guarded transaction, so two tabs clicking at once cannot push a visitor past the cap.
4. The cap is per visitor, per page. Visitors are told apart by a keyed hash of IP address and browser, never stored raw. Clearing storage does not reset it; changing networks does. It is an abuse deterrent, not a ballot box.

Several buttons, one page

Load the bundle without data-key and place elements yourself. Give each an data-item and they count separately — comments, cards, or a single-page app that changes routes without reloading.

<script src="https://your-instance.example/widget.js" async></script>
…
<appreciate-button data-key="pk_…" data-item="post-1" data-count="left"></appreciate-button>
<appreciate-button data-key="pk_…" data-item="post-2" data-count="left"></appreciate-button>

Questions