Zum Hauptinhalt springen

Installation des Feedback-Widgets

Mit dem Feedback-Widget von Almirant können die Nutzer deiner Anwendung Feedback direkt an dein Projekt senden. Das Feedback geht als Einträge an das Ideen-Board von Almirant, wo du es prüfen, priorisieren und in Work Items umwandeln kannst.

Es gibt zwei Möglichkeiten zur Installation: mit einem Script-Tag (für jede Website) oder mit dem React-/Next.js-Paket.

Script-Tag (HTML)​

Die einfachste Methode. Sie funktioniert unabhängig vom Framework auf jeder Website.

1. Öffentlichen Schlüssel abrufen​

  1. Gehe in deinem Almirant-Projekt zu Einstellungen > Integrationen > Feedback-Widget
  2. Kopiere den öffentlichen Schlüssel (pk_...)

2. Script hinzufügen​

Füge diese Zeilen vor dem schließenden </body>-Tag in dein HTML ein:

<script src="https://cdn.almirant.ai/feedback-widget.iife.js"></script>
<script>
  FeedbackWidget.init({
    publicKey: 'pk_tu_clave_publica',
    position: 'bottom-right',
    theme: 'auto',
  });
</script>

Das ist alles. In der unteren rechten Ecke deiner Website erscheint ein schwebender Button. Beim Klicken öffnet sich ein Formular zum Senden von Feedback.

Vollständiges HTML-Beispiel​

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi Aplicacion</title>
</head>
<body>
  <h1>Bienvenido a mi aplicacion</h1>

  <!-- Feedback-Widget von Almirant -->
  <script src="https://cdn.almirant.ai/feedback-widget.iife.js"></script>
  <script>
    FeedbackWidget.init({
      publicKey: 'pk_tu_clave_publica',
      position: 'bottom-right',
      theme: 'auto',
    });
  </script>
</body>
</html>

React / Next.js​

Wenn deine Anwendung React oder Next.js verwendet, kannst du das offizielle Paket nutzen, das eine Komponente und einen Hook enthält.

1. Paket installieren​

bun add @almirant/feedback-react

Oder mit npm:

npm install @almirant/feedback-react

2. Komponente verwenden​

import { FeedbackWidget } from '@almirant/feedback-react';

export default function App() {
  return (
    <>
      <main>
        <h1>Mi aplicacion</h1>
      </main>

      <FeedbackWidget
        publicKey="pk_tu_clave_publica"
        position="bottom-right"
        theme="auto"
      />
    </>
  );
}

Verwendung im Next.js App Router​

Lege das Widget bei Next.js mit App Router in dein Root-Layout, damit es auf allen Seiten verfügbar ist:

// app/layout.tsx
import { FeedbackWidget } from '@almirant/feedback-react';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="es">
      <body>
        {children}
        <FeedbackWidget
          publicKey="pk_tu_clave_publica"
          position="bottom-right"
          theme="auto"
        />
      </body>
    </html>
  );
}
Hinweis

Die Komponente FeedbackWidget wird nur auf dem Client gerendert. Im Layout musst du 'use client' nicht verwenden; die Komponente übernimmt dies intern.

Verwendung im Next.js Pages Router​

// pages/_app.tsx
import { FeedbackWidget } from '@almirant/feedback-react';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <FeedbackWidget
        publicKey="pk_tu_clave_publica"
        position="bottom-right"
        theme="auto"
      />
    </>
  );
}

Konfigurationsoptionen​

Sowohl der Script-Tag als auch die React-Komponente akzeptieren dieselben Optionen:

OptionTypStandardBeschreibung
publicKeystring-- (erforderlich)Öffentlicher Schlüssel deines Projekts (pk_...)
positionstring'bottom-right'Position des Buttons: 'bottom-right', 'bottom-left', 'top-right', 'top-left'
themestring'auto'Visuelles Theme: 'light', 'dark', 'auto' (erkennt die Systemeinstellung)
Tipp

Verwende theme: 'auto', damit sich das Widget automatisch an den Hell-/Dunkelmodus des Browsers der Nutzer anpasst. Wenn deine Anwendung einen eigenen Theme-Umschalter hat, kannst du dynamisch 'light' oder 'dark' übergeben.

Weitere Optionen zur visuellen Anpassung findest du auf der Seite Anpassung.