Zum Hauptinhalt springen
Ideenkiste
Tutorials

Feedback-Widget in deine SaaS einbinden – Schritt-für-Schritt mit React und Next.js

Schritt-für-Schritt-Anleitung für die Integration eines Feedback-Widgets in React- und Next.js-Anwendungen – inklusive identify(), Theming und typischen Stolperfallen.

Ideenkiste-Team4 Min. Lesezeit

Wofür ein In-App-Feedback-Widget?

Wenn Anwender Feedback nur über E-Mail oder ein separates Portal geben können, verlieren sie den Kontext der Aktion. Wer gerade in einem Workflow steckt und einen Stolperstein erlebt, will im Moment der Frustration etwas einreichen – nicht erst die Webseite besuchen, ein Formular suchen und drei Felder ausfüllen.

Ein In-App-Widget reduziert diese Hürde auf einen Klick. Der Floating-Button im unteren rechten Bildschirmrand öffnet ein Modal, in dem die Idee in 20 Sekunden eingereicht werden kann. Die Conversion-Rate von „Widget gesehen" zu „Vorschlag eingereicht" liegt typischerweise drei- bis fünfmal so hoch wie bei einem externen Portal.

Schritt 1: Widget-Code aus dem Admin-Panel kopieren

Im Admin-Panel deines Feedback-Tools findest du den Widget-Code, der typischerweise so aussieht:

<script
  src="https://ideenkiste.app/widget/widget.js"
  data-board="dein-slug"
  data-theme="auto"
  data-lang="de"
  data-position="bottom-right"
  async
></script>

Das ist ein einzelner Script-Tag, der das Widget-Bundle (ca. 2 KB) asynchron lädt. Dank Shadow-DOM wirken die Styles deiner App und die Widget-Styles nicht aufeinander – kein CSS-Konflikt, kein Class-Name-Clash.

Schritt 2: Einbau in eine klassische React-App

In einer React-App ohne Server-Side-Rendering reicht es, das Script in public/index.html zu platzieren, idealerweise vor dem schließenden Body-Tag. Der Bundler kümmert sich nicht darum, weil es kein Modul ist.

Falls du eine SPA verwendest und das Widget erst nach dem Login laden willst, kannst du es dynamisch injizieren:

import { useEffect } from 'react';

export function FeedbackWidget() {
  useEffect(() => {
    if (document.getElementById('ideenkiste-widget')) return;
    const script = document.createElement('script');
    script.id = 'ideenkiste-widget';
    script.src = 'https://ideenkiste.app/widget/widget.js';
    script.async = true;
    script.dataset.board = 'dein-slug';
    script.dataset.theme = 'auto';
    document.body.appendChild(script);
  }, []);
  return null;
}

Schritt 3: Einbau in Next.js

In Next.js empfiehlt sich die Script-Komponente aus next/script, weil sie automatisch die richtige Load-Strategie wählt:

import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://ideenkiste.app/widget/widget.js"
          strategy="afterInteractive"
          data-board="dein-slug"
          data-theme="auto"
          data-lang="de"
        />
      </body>
    </html>
  );
}

Die Strategie afterInteractive sorgt dafür, dass das Widget nach dem ersten Interactive-Event geladen wird – das hält den Initial-Page-Load schlank, ohne die Sichtbarkeit zu verzögern.

Wenn du das Widget nur für eingeloggte Anwender zeigen willst, lade es nur im Authenticated-Layout (z. B. app/(authenticated)/layout.tsx).

Schritt 4: Anwender vorausfüllen mit identify()

Wenn dein User bereits eingeloggt ist, willst du verhindern, dass er beim Einreichen eines Vorschlags zusätzlich seine E-Mail-Adresse eingeben muss. Dafür gibt es die JavaScript-API:

import { useEffect } from 'react';
import { useAuth } from '@/hooks/useAuth';

export function FeedbackIdentify() {
  const { user } = useAuth();
  useEffect(() => {
    if (!user) return;
    window.Ideenkiste?.identify({
      email: user.email,
      name: user.name,
    });
  }, [user]);
  return null;
}

Sobald identify() aufgerufen wurde, übernimmt das Widget die Daten und überspringt den Magic-Link-Schritt. Der Vorschlag wird direkt diesem Anwender zugeordnet.

Schritt 5: Theme und Position anpassen

Standardmäßig passt sich das Widget der Browser-Präferenz an (light/dark). Wenn dein Produkt einen festen Dark Mode hat, kannst du das im Script erzwingen:

<script
  data-theme="dark"
  data-position="bottom-left"
  data-primary-color="#10b981"
></script>

Die data-primary-color-Eigenschaft ändert die Akzent-Farbe des Floating-Buttons und der Action-Buttons. Wähle eine Farbe, die zum restlichen UI passt – das Widget wirkt sonst wie ein Fremdkörper.

Häufige Stolperfallen

Content-Security-Policy (CSP). Wenn deine App eine strenge CSP hat, musst du https://ideenkiste.app zu script-src hinzufügen. Sonst lädt das Widget gar nicht.

Server-Side Rendering. Wenn du das Widget in einer SSR-fähigen Komponente einbindest, achte darauf, dass window.Ideenkiste erst client-seitig existiert. Wrap Aufrufe in useEffect oder prüfe typeof window !== 'undefined'.

Mehrfach-Initialisierung. Wenn du das Script versehentlich zweimal lädst (z. B. in mehreren Layouts), siehst du zwei Floating-Buttons. Die Lösung ist eine einzige Stelle in deiner App, die das Widget lädt.

Mobile-WebView. In nativen Apps mit WebView funktioniert das Widget grundsätzlich, du musst aber sicherstellen, dass JavaScript erlaubt ist. Außerdem solltest du data-position="bottom-right" ggf. anpassen, falls deine App eine eigene Bottom-Navigation hat.

Conversion-Tipps für mehr Einreichungen

Aus den Daten von Boards mit ein paar tausend Anwendern lassen sich klare Muster erkennen.

Erstens: zeige das Widget nicht überall. Auf der Landingpage oder im Onboarding lenkt es ab. Aktiviere es nur in den Bereichen, wo Anwender tatsächlich arbeiten.

Zweitens: füge eine kontextuelle Einladung hinzu. Ein dezenter Hinweis nach einer erfolgreichen Aktion („Vermisst du etwas?") erhöht die Klickrate auf das Widget oft um den Faktor zwei.

Drittens: nutze das Widget für gezielte Trigger. Wer wiederholt einen Fehler bekommt, erhält eine dezente Einladung „Hat das nicht funktioniert wie erwartet?". Diese gezielten Trigger erzielen die höchste Antwortrate – aber bitte mit Frequency-Cap, sonst werden sie schnell als Spam empfunden.

Fazit

Die Integration eines Feedback-Widgets ist in der Regel ein 30-Minuten-Job. Der eigentliche Aufwand liegt nicht im Einbau, sondern im Setup des darunterliegenden Boards und der Triage-Routine. Sobald das steht, ist das Widget der niedrigschwelligste Kanal zur Sammlung von Anwenderwünschen, den ein SaaS haben kann.

Für die Anbindung in einer nativen App empfiehlt sich der Umweg über WebView – mehr dazu im Glossar-Eintrag In-App Feedback. Wer das Widget direkt einbauen will, findet den Code im Admin-Bereich seines Boards.

Teilen

LinkedInX / Twitter

Tags

  • tutorial
  • widget
  • react
  • nextjs
  • integration

Ueber Ideenkiste-Team

Beitraege aus dem Ideenkiste-Team rund um Kundenfeedback und Produktentwicklung. Fragen oder Themenwuensche? Schreib uns.

Das koennte dich auch interessieren