Like Button
Add an interactive like button to your website with a single line of code
Try It
Quick Start
HTML
<!-- Add the widget loader -->
<script type="module" src="https://www.inamoon.com/kudos/widgets" async></script>
<!-- Declare the creator(s) who should receive appreciation -->
<inamoon-creator subject="twitter:inamoon"></inamoon-creator>
<!-- Add the like button wherever you want it -->
<inamoon-like></inamoon-like>Components
<inamoon-like>
The interactive like button. Users can click multiple times (up to max) to show varying levels of appreciation.
| Attribute | Type | Default | Description |
|---|---|---|---|
| size | number | 40 | Button size in pixels |
| max | number | 10 | Maximum number of clicks |
| debounce | number | 1500 | Milliseconds to wait before syncing |
| emoji | string | "👍" | Default emoji for appreciation |
| grow | "center" | "up" | "down" | "center" | Direction button scales when clicked |
<inamoon-creator>
Declares a creator who should receive appreciation. This component is invisible - it just
registers the creator. You can have multiple creators on a page; appreciation is split
between them based on their slices values.
| Attribute | Type | Default | Description |
|---|---|---|---|
| subject | string | required | Creator identifier (e.g., "email:[email protected]") |
| slices | number | 200 | Weight for splitting appreciation (max 2000) |
| emojis | string | "" | Comma-separated list of allowed emojis |
Supported subject formats:
twitter:username - Twitter/Xgithub:username - GitHubyoutube:handle - YouTubebluesky:handle.bsky.social - Blueskyreddit:username - Redditinstagram:username - Instagramfacebook:username - Facebooklinkedin:username - LinkedIntiktok:username - TikTokpinterest:username - Pinterestmedium:username - Mediumgitlab:username - GitLabhn:username - Hacker Newstruth:username - Truth Socialwikimedia:username - Wikipediaemail:[email protected] - EmailFull Example
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="inamoon:creator" content="twitter:inamoon" data-slices="200" />
</head>
<body>
<article>
<h1>My Blog Post</h1>
<p>Article content here...</p>
<footer>
<p>Did you enjoy this article?</p>
<inamoon-like size="48"></inamoon-like>
</footer>
</article>
<script type="module" src="https://www.inamoon.com/kudos/widgets" async></script>
</body>
</html>Interaction
- Click Increment appreciation (moon fills up)
- Long press Toggle emoji selector (500ms hold)
- At max Additional clicks decrement back to zero
The button has three phases:
- Idle: Gray moon with tracking smile (attracts attention)
- Active: Moon fills with yellow as clicks increase
- Emoji: Select a custom emoji to express appreciation
Events
JavaScript
// When user clicks the like button
window.addEventListener('inamoon:like:click', (e) => {
console.log('Clicked!', e.detail.count);
});
// When appreciation is synced to server
window.addEventListener('inamoon:like:flush', (e) => {
console.log('Syncing...', e.detail);
});
// When sync completes
window.addEventListener('inamoon:like:flush:response', (e) => {
console.log('Sync result:', e.detail);
});
// When a creator is registered
window.addEventListener('inamoon:creator:register', (e) => {
console.log('Creator registered:', e.detail.subject);
});