Adding Kudos to Your Pages
Once you’ve embedded the site script, you can add “kudos” (or “likes”) to your pages. It’s a great way to get feedback on articles or individual pages without relying on social media - bringing engagement right to your site on the open web.
Setting Up Kudos
1. Modify Your Embed Script
Add the kudos
parameter to your embed script:
https://tinylytics.app/embed/YOUR_EMBED_CODE.js?kudos
If you’re also using the hit counter, combine them like this:
https://tinylytics.app/embed/YOUR_EMBED_CODE.js?hits&kudos
Implementation Options
Single Kudos Button
For a single kudos button on a page:
<button class="tinylytics_kudos"></button>
Leave the button empty - we’ll add the content automatically.
Multiple Kudos Buttons
For multiple kudos buttons (e.g., on an index page with multiple posts):
<button class="tinylytics_kudos" data-path="/the-path/to/your-post"></button>
Important:
- The data-path
attribute ensures correct kudos count for each path
- Paths must start with a forward slash (/
)
- Incorrect paths may result in kudos not being recorded properly
How It Works
When your page loads with kudos enabled:
- The script checks for kudos elements on your page
- For each button:
- Retrieves the current kudos count (e.g.,
👋 42
) - Checks if the visitor has already given kudos
- Enables/disables the button accordingly
- Retrieves the current kudos count (e.g.,
- When a visitor gives kudos:
- Sends the request to our servers
- Adds
.did_select
class to the button - Disables the button
- Stores a unique kudos ID in localStorage
Customization Options
Custom Emoji
Change the default 👋 emoji:
https://tinylytics.app/embed/YOUR_EMBED_CODE.js?kudos=❤️
Custom Styling
Use your own image or styling:
https://tinylytics.app/embed/YOUR_EMBED_CODE.js?kudos=custom
This returns only the count, allowing you to add your own images or styling.
Private Kudos
Keep kudos counts private (visible only to you):
<button class="tinylytics_kudos" data-private="true"></button>
Note: You’ll need to style this to provide visual feedback to users. Check the classes we add (.did_select
) for styling hooks.
Plan Features
- Free Plan: Can use kudos functionality
- Paid Plans: Access detailed kudos analytics in the dashboard
Try It Out
Tips
- Use
.did_select
class for styling active states - Consider adding loading states for better UX
- Combine with hit counters for more engagement metrics
- Perfect for blogs, portfolios, and documentation sites