Say ThankU and Do Good • www.thanku.social • Plant trees, clean the ocean, and protect animals
ThankU Counter Badge (Web Component)
Show the number of ThankUs you've collected and sent on your website.
See a DEMO here: https://thanku.github.io/counter-badge/
We make use of the latest browser features (Web Components, module scripts, fetch, CSS variables, etc.) which are well supported in current versions of Google Chrome, Mozilla Firefox, Apple Safari and Microsoft Edge. If you need to target older browser versions or Microsoft Internet Explorer, you need to provide appropriate polyfills.
Installation
Self hosted
Add the following to an HTML document:
<script type="module" src="path/to/counter-badge.js"></script>CDN
Add the following to an HTML document:
<script type="module" src="https://unpkg.com/@thanku/counter-badge"></script>NPM
Run npm i @thanku/counter-badge.
Usage
Create a <thanku-counter-badge> element with default content for users of browsers that don't support Web Components and add your ThankU wallet name to attribute slug.
<thanku-counter-badge slug="martin">
<a href="https://thx.to/:martin">Visit my ThankU wallet</a>
</thanku-counter-badge>To get the full ThankU look and feel, also include the following font inside <head>:
<link href="https://www.thanku.social/fonts/exo.css" rel="stylesheet" />Attributes
-
slug- Your ThankU wallet name (required) -
lang- The language used for the text inside of the widget (optional, available:en|de, defaults toen) -
duration- The number of milliseconds each slide will be displayed (optional, defaults to1000)
All attributes can be updated programatically, and the UI will update to reflect the changes.
const widget = document.querySelector("thanku-counter-badge");
widget.slug = "lukasz";
widget.lang = "de";Styling
The style of the <thanku-counter-badge> element can be changed by setting the following custom properties / CSS variables:
-
--size- The size of the badge (defaults to100px)
The CSS variables can be set e.g. inline via the style attribute like this:
<thanku-counter-badge slug="martin" style="--size: 25vw">
</thanku-counter-badge>