@thanku/impact-widget

The ThankU Impact Widget is a Web Component that requests and displays the impact a specific user has generated on www.thanku.social

Usage no npm install needed!

<script type="module">
  import thankuImpactWidget from 'https://cdn.skypack.dev/@thanku/impact-widget';
</script>

README

ThankU logo

Say ThankU and Do Goodwww.thanku.social • Plant trees, clean the ocean, and protect animals


ThankU Impact Widget (Web Component)

Show your impact with ThankU on your website.

ThankU Impact Widget Screenshot

See a DEMO here: https://thanku.github.io/impact-widget/**

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/impact-widget.js"></script>

CDN

Add the following to an HTML document:

<script type="module" src="https://unpkg.com/@thanku/impact-widget"></script>

NPM

Run npm i @thanku/impact-widget.

Usage

Create a <thanku-impact-widget> element with default content for users of browsers that don't support Web Components and add your ThankU page name to attribute slug.

<thanku-impact-widget slug="martin">
  <a href="https://thx.to/:martin">Visit my ThankU page</a>
</thanku-impact-widget>

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 page name (required)
  • lang - The language used for the text inside of the widget (optional, available: en|de, defaults to en)

All attributes can be updated programatically, and the UI will update to reflect the changes.

const widget = document.querySelector("thanku-impact-widget");
widget.slug = "lukasz";
widget.lang = "de";

Styling

The style of the <thanku-impact-widget> element can be changed by setting the following custom properties / CSS variables:

  • --bg-color - The background color of the widget
  • --bg-image - The background image of the widget (e.g. an image or gradient or none)
  • --color-text-base - The base color of the text
  • --color-text-headline - The color of the headline text
  • --color-text-emphasis - The color of emphasized text, like impact value and error message
  • --font-family - The font family of the text (defaults to "Exo", sans-serif)

The CSS variables can be set e.g. inline via the style attribute like this:

<thanku-impact-widget
  slug="martin"
  style="--bg-color: #202c55;
         --bg-image: none;
         --color-text-base: white;
         --color-text-headline: #78c0c4;
         --color-text-emphasis: #eea746;
         --font-family: 'Roboto Mono', monospace"
>
</thanku-impact-widget>

License

MIT License