# 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:

```html
https://tinylytics.app/embed/YOUR_EMBED_CODE.js?kudos
```

If you're also using the [hit counter](/docs/show_hit_counter), combine them like this:

```html
https://tinylytics.app/embed/YOUR_EMBED_CODE.js?hits&kudos
```

## Implementation Options

### Single Kudos Button

For a single kudos button on a page:

```html
<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):

```html
<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:

```html
https://tinylytics.app/embed/YOUR_EMBED_CODE.js?kudos=❤️
```

### Custom Styling

Use your own image or styling:

```html
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):

```html
<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

- **Legacy free accounts:** Can use kudos functionality.
- **Paid plans:** Access detailed kudos analytics in the dashboard.

## Try It Out

<button class="tinylytics_kudos cursor-pointer disabled:font-bold" data-ignore="true">👋</button>

## 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