Widgets mit einem KI-Coding-Agenten einbinden

Wenn du an deiner Website im Code-Editor arbeitest — React, Vue, Next.js, reines HTML oder ein WordPress- oder Shopware-Theme — brauchst du keine Klick-für-Klick-Anleitung. Wir veröffentlichen einen Skill, der deinem KI-Coding-Agenten beibringt, wie ReviewForest Widgets funktionieren. Einmal installieren, danach sagst du deinem Agenten einfach in normaler Sprache, was du willst.

Das klappt mit Claude Code, Cursor, Codex, GitHub Copilot und dutzenden weiteren Agenten, denn der Skill folgt dem offenen Standard Agent Skills.

Zwei Wege, die dein Agent gehen kann

Der Skill deckt beide ab, und dein Agent fragt dich, welchen du möchtest.

	Widget-Embed (empfohlen)	Eigenes Design über die API
Was passiert	Dein Agent baut unser fertiges Widget auf der Seite ein	Dein Agent holt deine Bewertungsdaten und baut eigene Komponenten
Design	Im ReviewForest Dashboard eingestellt	Komplett deins, in deinem eigenen Framework
Lädt unser JavaScript	Ja	Nein
Du brauchst	Eine Widget-ID	Einen API-Key mit dem Scope Website-Widgets

Fang mit dem Widget-Embed an. Den API-Weg brauchst du nur, wenn keines unserer 7 Widgets zu dem Design passt, das dir vorschwebt.

Schritt 1: Skill installieren

Führ das in deinem Projektordner aus:

npx skills add reviewforest/skills

Der Befehl erkennt deine installierten Agenten und fragt gegebenenfalls nach, wohin der Skill soll. Er landet dann im Ordner des jeweiligen Agenten — .claude/skills/ bei Claude Code, .agents/skills/ bei Cursor und Codex, und so weiter. Weil das in deinem Projekt liegt, kannst du es ganz normal mitcommitten, und deine Kolleginnen und Kollegen haben den Skill dann auch.

Du willst ihn lieber in jedem Projekt auf deinem Rechner haben? Dann nimm die globale Variante:

npx skills add reviewforest/skills --global

Spätere Änderungen holst du dir mit npx skills update.

Oder ganz ohne Installation

Wenn du keine zusätzliche Datei in deinem Repo haben willst, lass dir den fertigen Prompt ausgeben:

npx skills use reviewforest/skills

Der Befehl lädt den Skill in einen temporären Ordner und gibt dir einen Prompt aus, den du in deinen Agenten kopierst. Mit --agent claude-code (oder einer anderen Agent-ID) startet er den Agenten gleich damit.

Leg dir unter app.reviewforest.org/website-widgets/add ein Widget an und pass es an — Typ auswählen, Farben setzen, festlegen welche Bewertungen erscheinen. Du hast schon eins? Dann hol dir den Code bei deinen installierten Widgets.

Kopier den Code, den du bekommst. Er sieht so aus:

<script src="https://widgets.reviewforest.org/main.js" defer></script>
<div class="reviewforest-app-DEINE-WIDGET-ID"></div>

Du kannst deinem Agenten den ganzen Schnipsel geben oder nur die ID aus dem div — den Rest baut er sich selbst zusammen.

Schritt 3: Deinem Agenten sagen, was du willst

Jetzt beschreibst du einfach das Ergebnis, das du haben möchtest, und fügst den Code aus Schritt 2 ein:

Bau mein ReviewForest Testimonial-Karussell auf der Startseite ein,
direkt unter dem Hero-Bereich:

<script src="https://widgets.reviewforest.org/main.js" defer></script>
<div class="reviewforest-app-DEINE-WIDGET-ID"></div>

Bau mein ReviewForest Bewertungsscore-Badge auf jeder Seite ein. Es ist
im Dashboard als schwebendes Badge eingestellt. Widget-ID: DEINE-WIDGET-ID

Bau auf der Über-uns-Seite einen Bewertungsbereich mit der ReviewForest
API statt mit dem Embed-Widget. Orientier dich am Stil unserer bestehenden
Karten. API-Key (nur Website-Widgets-Scope): DEIN-API-KEY

Die technischen Details musst du nicht erklären. Der Skill sagt deinem Agenten schon:

Welche 7 Widget-Typen es gibt und welche davon einen breiten Container brauchen (das Testimonial-Karussell und das Bewertungswald-Widget wirken in einer schmalen Spalte gequetscht)
Dass das <script>-Tag nur einmal rein muss, egal wie viele Widgets du einbaust, und jedes Widget sein eigenes div bekommt
Dass Badges, die auf schwebend eingestellt sind, direkt vor das schließende </body>-Tag gehören, während Badges mit fester Position genau dorthin kommen, wo du sie auf der Seite haben willst

Eigenes Design: der Weg über die API

Wenn unsere Widgets dein Wunschdesign nicht hergeben, kann dein Agent die Daten abrufen und alles nativ rendern — React-Komponenten, Vue-Templates, reines HTML, was auch immer dein Projekt nutzt. Unser Widget-JavaScript lädt dann nicht mehr mit; deine Seite holt die Daten direkt aus unserer API.

Erstell einen API-Key unter app.reviewforest.org/integrations/public-api.
Wähl den Scope Website-Widgets aus. Das ist der wichtige Teil — siehe Hinweis unten.
Gib deinem Agenten den Key und beschreib, was du anzeigen möchtest.

Dein Agent kann mit deinem Gesamtscore arbeiten, mit deiner Anzahl an Bewertungen, deinen Baumzahlen (gesamt, aus Bewertungen oder nach Zeitraum), deinen verbundenen Plattformen samt ihren einzelnen Scores, den Bewertungen selbst, einer Liste der einzelnen gepflanzten Bäume und einem Link auf deine öffentliche Bewertungswald-Seite.

Ergebnis prüfen

Wenn dein Agent fertig ist, ruf die Seite auf und schau nach:

Das Widget ist da und zeigt deine echten Bewertungen
Das Tag <script src="https://widgets.reviewforest.org/main.js"> steht genau einmal im Quelltext
Breite Widgets haben genug Platz — wenn dein Karussell gequetscht aussieht, sitzt es in einem zu schmalen Container
Auf dem Handy passt auch alles

Wenn gar nichts erscheint, liegt es meistens an einer Content Security Policy, die externe Skripte blockiert. Die Domain widgets.reviewforest.org muss für script-src und connect-src freigegeben sein — sonst lädt entweder das Skript nicht oder es bekommt keine Daten.

Wie es weitergeht

Widgets & Datenschutz — keine Cookies, anonymisierte IPs, plus Mustertext für deine Datenschutzerklärung
Farben und Stil deines Widgets anpassen — für alles, was du lieber im Dashboard einstellst
Sterne-Bewertungen in den Google-Suchergebnissen — was das Bewertungsscore-Widget für deinen Sucheintrag tut

Der Skill selbst liegt unter github.com/reviewforest/skills, falls du nachlesen willst, was dein Agent liest.