With the ThankU Counter-Badge you can dynamically present the current number of your received and sent ThankUs on your own website. You’ll learn in this article, how you can integrate the counter badge into your website.
Step 1: Before we start
Consider whether you want to host the files required for the counter badge on your own server, or prefer to embed the files on your website via a link. While the first variant might be better for the loading times of your website, the second variant is probably easier and faster to do.
- Variant 1 – Host the files on your own server:
- Download the necessary files: https://github.com/thanku/counter-badge/archive/refs/heads/master.zip.
- Extract the .zip folder and upload the unzipped folder to your server.
- Note the path to the “counter-badge.js” file in the “libs” subfolder.
- Add the following script to the HTML code of your website:
<script type="module" src="path/to/counter-badge.js"></script>
- Variant 2 – Include files via embeding:
- Add the following script to the HTML code of your website:
<script type="module" src="https://unpkg.com/@thanku/counter-badge"></script>
In order to benefit from the full ThankU look & feel, you should also make sure that the “Exo” font is available on your website (via Google Web Fonts, hosted locally, or via the following script within the<head> area of your website’s HTML code:
<link href="https://www.thanku.social/fonts/exo.css" rel="stylesheet" />
Step 2: Create counter-badge element
- Add the element (see below) to the place on your website where you want the counter-badge to be displayed.
- Add the name of your ThankU page using the “slug” attribute.
- Add the link to your ThankU page (https://thx.to/: …) and the corresponding text to be displayed.
Counter-Badge element:
<thanku-counter-badge slug="martin"> <a href="https://thx.to/:martin">Visit my ThankU page</a> </thanku-counter-badge>
Step 3: Customize the Counter-Badge
The default size of the counter badge is 100px. You can adjust the size yourself by adding inline CSS (i. e. style=”–size: …px”) to the element:
<thanku-counter-badge slug="martin" style="--size: 50px;"> <a href="https://thx.to/:martin">Visit my ThankU page</a> </thanku-counter-badge>
Step 4: Check the implementation
Congratulations: that’s it. If you did everything correctly, the ThankU counter badge should now appear on the desired location on your website.
Is all this too complicated for you? Just ask your web designer or admin to do this simple task for you – it shouldn’t take him/her more than a few minutes.
By the way, you can find detailed technical instructions, licensing information and more sample code on GitHub.
Have fun with the ThankU-Counter badge!
