You want to show your ThankU impact to the whole world? Then our Impact Widget is the right choice! The widget is ready to use in a few minutes and always presents your current ThankU impact. In this tutorial, you’ll learn how you can integrate the Impact Widget into your website without much fuss.
Before we start
The ThankU Impact Widget makes use of the latest browser features supported by popular modern browsers, such as Google Chrome, Mozilla Firefox, Apple Safari and Mircosoft Edge. However, please note that we cannot guarantee the proper display of our widget in outdated browser versions.
Step 1: Install the required files on your website
A very convenient way to install the required files is to integrate them via a CDN. To do this, simply add the following script to the HTML code in the <head> area of your website:
<script type="module" src="https://unpkg.com/@thanku/impact-widget"></script>
In order to benefit from the full ThankU look & feel, you should additionally make sure that the font “Exo” is available on your website (via Google Web Fonts, hosted locally or via the following script within the <head> area in your HTML code:
<link href="https://www.thanku.social/fonts/exo.css" rel="stylesheet" />
Step 2: Display the Impact Widget on your website
Now, to display the ThankU Impact widget on your website, you can simply add the following HTML element in the desired location:
<thanku-impact-widget slug="your-name"> <a href="https://thx.to/:your-name">Visit my ThankU-Page</a> </thanku-impact-widget>
The Impact widget is now theoretically ready to use – but you still need to make a few settings to avoid the following error message…
Step 3: Customize the Impact Widget
To connect the Impact Widget with your website, you have to replace “your-name” in the code above with the name of your ThankU-Page. The link “https://thx.to/:your-name” serves as a fallback for older browsers and should be pointing at your ThankU-Page as well.
In addition, you have the possibility to change the default widget language from English to German by making use of the “lang” attribute.
With the help of the following inline-CSS attributes you can also customize the widget’s visual appearance to suit your needs.
--bg-color– The background color of the widget--bg-image– The background image of the widget (e.g. an image or gradient ornone)--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)
To illustrate some of the settings you’ll find an exemplary code snippet below. It belongs to our CTO Martin, who developed the Impact Widget:
<thanku-impact-widget slug="martin" lang="en" style="--bg-color: #202c55; --bg-image: none; --color-text-base: white; --color-text-headline: #78c0c4; --color-text-emphasis: #eea746; --font-family: 'Roboto Mono', monospace; --scale: 1.5;" > <a href="https://thx.to/:martin">Visit my ThankU-Page</a> </thanku-impact-widget>
Step 4: Check the outcome
With the above settings, Martin’s widget would finally look like this:
Visit my ThankU-Page
You can find detailed instructions including a demo in English and licensing details on Github.
We hope you find this tutorial helpful and wish you a lot of fun with the integration of the ThankU Impact widget!
