Adding Kudos to your pages

Once you've embedded the site script to your site, you can also add the ability for visitors to add "kudos" or "likes" to your site; it's really up to you how you want to call it. We're gonna stick to kudos for now.

This is great for articles or individual pages, just for that extra little feedback. You usually only see this using social media, however we've made sure you can have it to on the best social network around the globe, yep, the open web... right on your site.

To add kudos to your site, you need to make changes to your embed script. Just add the kudos parameter to it, for example:

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

If you're using the hit counter you can do the following:

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

Super easy. Here are two options for you...

Showing a single kudos button:

To show one kudos button on the page create an element on the page with a class of .tinylytics_kudos. That allows the script to locate it and show a relevant kudos button and count. Here is a good example of what it should like:

  <button class="tinylytics_kudos"></button>

We use a button here because that it's what it is. Make sure to leave it empty, as we'll override the inner contents.

Showing multiple kudos buttons:

To show multiple kudos buttons on the same page, for example on an index page full of posts, use similar markup as above, with a few tweaks.

  <button class="tinylytics_kudos" data-path="/the-path/to/your-post" ></button>

Note the extra data-path="" attribute. If you set this, it will make sure to only grab the correct Kudos count for the path you entered here. If you leave this out, it'll use the current page path: just like the single kudos button above.

Note that paths need to be correct and prepended with a forward slash (if none is set): "/". If you leave it out, then kudos might not be recorded correctly.

What's happening:

When we load your page script, and notice you have kudos enabled we'll do a few things depending if it's a single or multi kudos set up:

We'll check the above element exists on your page, if so:
We grab any relevant kudos count for the page you're on and add it to the button, for example 👋 42. If you have multiple buttons, it will do this for each using the supplied data-path.
We check if the visitor already sent you a kudos for that page or button, and won't allow a second attempt. We store this data in localStorage in the browser and by no means has any identifiable data associated to it. It's all unique to the kudos.
if number 3 above doesn't see any data related to a previous kudos, it'll allow the visitor to set one. That in turn sends a request to us and we'll mark the element with a .did_select class and also disable the button. We disable it so no subsequent actions can be sent. Once sent, we return a unique kudos id to the browser that will be stored. In future, we'll allow the visitor to also remove their own kudos, if the data is available.

It's super simple and hopefully powerful enough.

We surface this data in the dashboard for the paid plans. Free accounts can use Kudos, but you won't be able to see which page received which...

And that's it.

Custom emoji:

To customise the emoji used for the default kudos, which is 👋, you can pass this to your embed script, for example if you want to add "love", you can do the following:

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

You can also hide the default emoji that is returned, in case you want to use a local custom image for your kudos. In that case just use the kudos=custom option. For example:

https://tinylytics.app/embed/YOUR_EMBED_CODE.js?kudos=custom

This will just bring back the count and you can apply your own image to an outer container, or a background image. Get creative!

Private kudos:

You can also keep the kudos count private to you only. That means visitors won't be able to see the count.

In order to achieve this, add a data attribute of data-private="true" to your kudos button.