Content Hub

Tutorial: ThankU Impact Widget auf der eigenen Website einbinden

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.

ThankU Impact Widget Screenshot

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…
  Visit my ThankU page

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 oder  none)
  • --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-serif eingestellt)

 

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!

Unterstütze ThankU und teile diesen Beitrag:

Weitere News & Beiträge von ThankU