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:

  1. The script checks for kudos elements on your page
  2. For each button:
    • Retrieves the current kudos count (e.g., 👋 42)
    • Checks if the visitor has already given kudos
    • Enables/disables the button accordingly
  3. 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