**Say ThankU and Do Good** • [www.thanku.social](https://www.thanku.social) • Plant trees, clean the ocean, and protect animals
---
# ThankU Impact Widget (Web Component)
Show your impact with ThankU on your website.
**See a DEMO here: https://thanku.github.io/impact-widget/**
We make use of the latest browser features ([Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components), [module scripts](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules), [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API), [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/--*), etc.) which are well supported in current versions of [Google Chrome](https://www.google.com/chrome/), [Mozilla Firefox](https://www.mozilla.org/en-US/firefox/new/), [Apple Safari](https://www.apple.com/safari/) and [Microsoft Edge](https://www.microsoft.com/en-us/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:
```html
```
### CDN
Add the following to an HTML document:
```html
```
### [NPM](https://www.npmjs.com/package/@thanku/impact-widget)
Run `npm i @thanku/impact-widget`.
## Usage
Create a `` element with default content for users of browsers that don't support Web Components and add your ThankU wallet name to attribute `slug`.
```html
Visit my ThankU wallet
```
To get the full ThankU look and feel, also include the following font inside ``:
```html
```
### Attributes
- `slug` - Your ThankU wallet 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.
```javascript
const widget = document.querySelector("thanku-impact-widget");
widget.slug = "lukasz";
widget.lang = "de";
```
### Styling
The style of the `` 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_
- `--scale` - The scale factor of the content (e.g. font and image sizes, defaults to `1`)
- `--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:
```html
```
## License
[MIT License](LICENSE)