Widgets und Embeds

Widget-Typen

• Wall of Love, das klassische Masonry-Raster deiner besten Testimonials
• Karussell, eine scrollende Reihe, super unter einer Hero-Section
• Einzel-Testimonial, ein hervorgehobenes Zitat, groß und deutlich
• Trust Badge, dein verifizierter Score mit Sternen (erfordert Unternehmens-Verifizierung)

Einbetten

Jedes Widget gibt dir eine Zeile Code:

<script src="https://app.trustfuel.ai/widget.js" data-trustfuel-widget="YOUR_ID" async></script>

Es funktioniert auf WordPress, Webflow, Framer, Shopify und jeder eigenen Seite. Das Widget rendert in einem isolierten Frame, passt seine Größe automatisch an, lädt lazy und bremst deine Seite nie.

Ein bestimmtes Testimonial einbetten

Jedes veröffentlichte Testimonial hat seinen eigenen Embed-Code (auf der Detailseite des Testimonials):

<script src="https://app.trustfuel.ai/widget.js" data-trustfuel-testimonial="TESTIMONIAL_ID" async></script>

Perfekt, um ein einzelnes starkes Zitat neben eine Preistabelle oder in eine Case Study zu setzen. Füg data-theme="dark" oder data-theme="auto" hinzu, um zu deiner Seite zu passen.

Custom CSS

Jedes Widget hat ein Custom CSS-Feld im Editor. Dein CSS gilt nur innerhalb dieses einen Embeds, jeder Embed-Code kann also komplett anders aussehen. Das sind die Klassen, die du ansprechen kannst:

Klasse	Was sie stylt
.tf-card	Der Karten-Container (Hintergrund, Rand, Radius, Schatten)
.tf-testi	Die Testimonial-Karte selbst
.tf-testi-quote	Der Zitat-Text
.tf-testi-author	Die Autor-Zeile unten auf der Karte
.tf-testi-name	Autor-Name (die kleine Zeile darunter ist ein small-Tag)
.tf-testi-avatar	Das runde Avatar-Bild
.tf-testi-media	Video-/Screenshot-Bereich einer Karte
.tf-stars	Die Sterne-Zeile (color ändert die Sternfarbe)
.tf-star--empty	Ungefüllte Sterne
.tf-badge	Der Trust-Badge-Container
.tf-badge-score	Die große Score-Zahl im Badge
.tf-wall	Das Masonry-Raster (columns steuert die Spaltenzahl)

Du kannst auch die Design-Tokens fürs ganze Embed überschreiben, zum Beispiel:

:root {
  --tf-primary: #e11d48;   /* Akzentfarbe */
  --tf-radius: 12px;       /* Kartenradius */
  --tf-font: Georgia, serif;
}
.tf-testi-quote { font-size: 18px; font-style: italic; }

Pro-Pläne können zusätzlich eine globale Akzentfarbe unter Settings → Branding setzen, die auf alle Embeds und Formulare gleichzeitig wirkt.

Genau auswählen, welche Testimonials erscheinen

Im Widget-Editor schaltest du Which testimonials? von Automatic auf Hand-picked. Du verwaltest zwei Listen:

• Available zeigt alles, was noch nicht im Widget ist. Such nach Name oder Zitat und filter nach Typ (Text, Video, Screenshot), dann klick ein Testimonial zum Hinzufügen. Hinzugefügte verlassen die Liste sofort.
• In widget zeigt, was nach dem Speichern live ist. Die Zahl an jedem Eintrag ist seine Reihenfolge; klick das ×, um es zu entfernen.

Der Automatic-Modus nutzt stattdessen Filter: Maximalzahl, Tag und nur Featured.

SEO Trust Badges (Dofollow-Backlink)

Widgets rendern aus Performance-Gründen in einem isolierten Frame, ihre Links geben also keinen SEO-Wert weiter. Dafür nutzt du die SEO Trust Badges auf Public Profile: drei statische Badge-Stile (Card, rundes Siegel, kompakte Leiste), die als reines HTML einbetten.

• Das Badge-Bild wird live aus deinem Review-Score generiert, es zeigt immer aktuelle Zahlen.
• Der Link zurück zu deinem TrustFuel-Profil ist ein normaler Dofollow-Link, ein echter Backlink, der deine Domain stärkt.
• Kopier das Snippet auf der Public-Profile-Seite und füg es in deinen Footer, dein Impressum oder deine Email-Signatur ein.
• Google Stars Markup: neben den Badges findest du ein einzeiliges JSON-LD-Script. Es injiziert Organization + AggregateRating Schema mit deinem live verifizierten Score in deine Seite, die technische Basis für Sterne-Snippets auf deinen eigenen Seiten. Beachte Googles Self-Serving-Policy: Sterne auf deiner eigenen Domain zeigt Google nach eigenem Ermessen, die garantierte Sterne-Fläche ist deine TrustFuel-Profilseite.

Transparenter Hintergrund

Aktivier Transparent background im Widget-Editor und die Widget-Fläche verschwindet komplett: die Karten schweben direkt auf deiner Seite, egal welche Farbe sie hat. Kombiniert mit dem transparenten iframe fügen sich Embeds so ohne sichtbaren Kasten in dunkle Funnels und Landing Pages ein.

Konfiguration

Theme (hell, dunkel oder dem System des Besuchers folgen), maximale Testimonials, Spalten, Tag-Filter, nur Featured und Sichtbarkeit der Sterne. Pro-Pläne können Widgets unter Settings → Branding in ihrer eigenen Akzentfarbe branden.