Du willst deinen ThankU Impact der ganzen Welt zeigen? Dann ist unser Impact Widget die richtige Wahl! Das Widget ist in wenigen Minuten einsatzbereit und präsentiert stets Deinen aktuellen ThankU-Impact. Wie Du das Impact Widget in Deine Website integrieren kannst, erfährst Du in diesem Tutorial.
Bevor wir starten
Das ThankU Impact Widget nutzt die aktuellsten Browser-Funktionen, die von gängigen modernen Browsern, wie Google Chrome, Mozilla Firefox, Apple Safari und Mircosoft Edge unterstützt werden. Bitte beachte jedoch, dass wir die einwandfreie Darstellung des Widgets in veralteten Browser-Versionen nicht garantieren können.
Schritt 1: Installation der erforderlichen Dateien auf Deiner Website
Eine sehr komfortable Möglichkeit zur Installation der benötigten Dateien stellt die Einbindung über ein CDN dar. Füge dazu im <head> Bereich Deiner Website einfach das folgende Script zum HTML-Code hinzu:
<script type="module" src="https://unpkg.com/@thanku/impact-widget"></script>
Damit Du vom vollen ThankU Look & Feel profitieren kannst, solltest Du zusätzlich noch dafür sorgen, dass die Schriftart “Exo” auf Deiner Website verfügbar ist (via Google Web-Fonts, lokal gehosted oder über das folgende Script innerhalb des <head> Bereichs in Deinem HTML-Code:
<link href="https://www.thanku.social/fonts/exo.css" rel="stylesheet" />
Schritt 2: Anzeigen des Impact Widgets auf Deiner Website
Um das ThankU Impact Widget nun auf Deiner Website anzeigen zu lassen, kannst Du einfach das folgende HTML-Element an der gewünschten Stelle einbauen:
<thanku-impact-widget slug="dein-name"> <a href="https://thx.to/:dein-name">Visit my ThankU page</a> </thanku-impact-widget>
Das Impact Widget ist nun theoretisch schon einsatzbereit – Du musst aber noch ein paar Einstellungen vornehmen, um die folgende Fehlermeldung zu vermeiden…
Schritt 3: Anpassen des Impact Widgets
Um das Widget mit Deiner ThankU-Seite zu verknüpfen, musst Du nun im obigen Code “dein-name” mit dem Namen Deiner ThankU-Seite ersetzen. Der Link “https://thx.to/:dein-name” innerhalb des Elements dient als Fallback für ältere Browser und sollte dementsprechend auch auf Deine ThankU-Seite verweisen.
Zudem hast Du noch die Möglichkeit, die Widget-Sprache, die standardmäßig auf Englisch eingestellt ist, mit dem Attribut “lang” auf Deutsch umzustellen.
Mittels der folgenden Inline-CSS Attribute kannst Du auch die Optik deines Widgets noch auf Deine Bedürfnisse anpassen:
--bg-color– Die Hintergrundfarbe des Widgets--bg-image– Das Hintergrundbild des Widgets (z.B. ein Bild, ein Farbverlauf odernone)--color-text-base– Die Grundfarbe des Textes--color-text-headline– Die Farbe des Überschriften-Textes--color-text-emphasis– Die Farbe von hervorgehobenem Text, z.B. des Impact-Wertes--scale– Die Skalierung des Widget-Inhalts--font-family– Die Schriftfamilie des Textes (standardmäßig ist"Exo", sans-serifeingestellt)
Zur Veranschaulichung findest Du nachfolgend einen beispielhaften HTML-Code von Martin, unserem CTO, der auch das Impact Widget entwickelt hat:
<thanku-impact-widget slug="martin" lang="de" 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">Besuche meine ThankU-Page</a> </thanku-impact-widget>
Schritt 4: Überprüfen der Implementierung
Martins Widget würde mit den obigen Einstellungen schließlich so aussehen:
Besuche meine ThankU-Page
Eine ausführliche Anleitung inkl. Demo in englischer Sprache und Angaben zur Lizenzierung findest Du übrigens auf Github.
Wir hoffen, Du findest dieses Tutorial hilfreich und wünschen Dir viel Spaß bei der Einbindung des ThankU Impact Widgets!
