Anpassung des Feedback-Widgets

Das Widget passt sich über Konfigurationsoptionen visuell an deine Anwendung an. Du kannst Farben, Texte, Position und responsives Verhalten ändern.

Vollständige Konfigurationsoptionen

Option	Typ	Standard	Beschreibung
publicKey	string	-- (erforderlich)	Öffentlicher Schlüssel deines Projekts
position	string	'bottom-right'	Position des Buttons: 'bottom-right', 'bottom-left', 'top-right', 'top-left'
theme	string	'auto'	Visuelles Theme: 'light', 'dark', 'auto'
accentColor	string	'#6366f1'	Hauptfarbe des Widgets (Button, Rahmen, Links)
labels	object	Siehe unten	Anpassbare Widget-Texte
labels.title	string	'Enviar feedback'	Titel des Formulars
labels.placeholder	string	'Describe tu idea o problema...'	Platzhalter des Textfelds
labels.submitButton	string	'Enviar'	Text des Senden-Buttons
labels.successMessage	string	'Gracias por tu feedback'	Meldung nach erfolgreichem Senden
labels.triggerButton	string	'Feedback'	Text des schwebenden Buttons
showTriggerLabel	boolean	true	Text neben dem Symbol des schwebenden Buttons anzeigen
zIndex	number	9999	CSS-z-index des Widgets
metadata	object	{}	Zusätzliche Daten, die mit jedem Feedback gesendet werden (Nutzer, Seite usw.)

Visuelle Anpassung

Akzentfarbe

accentColor definiert die Hauptfarbe des Widgets. Sie wird auf den schwebenden Button, Fokusrahmen und den Senden-Button angewendet.

<script>
  FeedbackWidget.init({
    publicKey: 'pk_tu_clave_publica',
    accentColor: '#e11d48',
  });
</script>

In React:

<FeedbackWidget
  publicKey="pk_tu_clave_publica"
  accentColor="#e11d48"
/>

Benutzerdefinierte Texte

Passe alle Texte des Widgets an deine Marke oder Sprache an:

<script>
  FeedbackWidget.init({
    publicKey: 'pk_tu_clave_publica',
    labels: {
      title: 'Cuentanos que piensas',
      placeholder: 'Escribe aqui tu sugerencia...',
      submitButton: 'Enviar sugerencia',
      successMessage: 'Recibido. Gracias por ayudarnos a mejorar.',
      triggerButton: 'Sugerencias',
    },
  });
</script>

In React:

<FeedbackWidget
  publicKey="pk_tu_clave_publica"
  labels={{
    title: 'Cuentanos que piensas',
    placeholder: 'Escribe aqui tu sugerencia...',
    submitButton: 'Enviar sugerencia',
    successMessage: 'Recibido. Gracias por ayudarnos a mejorar.',
    triggerButton: 'Sugerencias',
  }}
/>

Schwebender Button

Steuere das Aussehen und die Position des Buttons, der das Widget aktiviert:

<script>
  FeedbackWidget.init({
    publicKey: 'pk_tu_clave_publica',
    position: 'bottom-left',
    showTriggerLabel: false,    // Zeigt nur das Symbol, ohne Text
  });
</script>

Folgende Positionen sind verfügbar:

Wert	Beschreibung
'bottom-right'	Untere rechte Ecke (Standard)
'bottom-left'	Untere linke Ecke
'top-right'	Obere rechte Ecke
'top-left'	Obere linke Ecke

z-index

Wenn das Widget hinter anderen Elementen deiner Oberfläche verborgen ist, passe den zIndex an:

<script>
  FeedbackWidget.init({
    publicKey: 'pk_tu_clave_publica',
    zIndex: 50000,
  });
</script>

Benutzerdefinierte Metadaten

Du kannst mit jedem Feedback zusätzliche Daten senden, um die Prüfung zu vereinfachen. Die Metadaten werden dem Ideen-Item in Almirant angehängt.

<script>
  FeedbackWidget.init({
    publicKey: 'pk_tu_clave_publica',
    metadata: {
      userId: '12345',
      plan: 'enterprise',
      page: window.location.pathname,
    },
  });
</script>

In React kannst du dynamische Metadaten übergeben:

function App() {
  const { user } = useAuth();

  return (
    <FeedbackWidget
      publicKey="pk_tu_clave_publica"
      metadata={{
        userId: user?.id,
        email: user?.email,
        plan: user?.plan,
        page: window.location.pathname,
      }}
    />
  );
}

Tipp

Füge mindestens die userId und die aktuelle Seite in die Metadaten ein. So kannst du Feedback bestimmten Nutzern zuordnen und erkennen, aus welchem Bereich der Anwendung es gesendet wurde.

Responsives Verhalten

Das Widget passt sich automatisch an verschiedene Bildschirmgrößen an:

Bildschirm	Verhalten
Desktop (> 768px)	Das Formular öffnet sich als Popover neben dem schwebenden Button
Tablet (481px - 768px)	Das Formular öffnet sich zentriert mit halbtransparentem Overlay
Mobil (< 480px)	Das Formular nimmt als unteres Panel (Bottom Sheet) die gesamte Breite ein

Der schwebende Button behält seine Position bei allen Auflösungen bei. Auf Mobilgeräten wird showTriggerLabel automatisch deaktiviert, um Platz zu sparen.

Hinweis

Du musst nichts tun, damit das Widget responsiv ist. Es passt sich automatisch an den Viewport des Geräts an.

Dunkelmodus

Mit theme: 'auto' erkennt das Widget die Einstellung des Betriebssystems (prefers-color-scheme) und passt sich an.

Wenn deine Anwendung einen eigenen Theme-Umschalter hat, kannst du diesen direkt steuern:

function App() {
  const { theme } = useTheme(); // dein Theme-Hook

  return (
    <FeedbackWidget
      publicKey="pk_tu_clave_publica"
      theme={theme} // 'light' oder 'dark'
    />
  );
}

Vollständiges Beispiel

<script src="https://cdn.almirant.ai/feedback-widget.iife.js"></script>
<script>
  FeedbackWidget.init({
    publicKey: 'pk_tu_clave_publica',
    position: 'bottom-right',
    theme: 'auto',
    accentColor: '#2563eb',
    showTriggerLabel: true,
    zIndex: 9999,
    labels: {
      title: 'Tu opinion importa',
      placeholder: 'Que podemos mejorar?',
      submitButton: 'Enviar',
      successMessage: 'Gracias. Tu feedback ha sido registrado.',
      triggerButton: 'Feedback',
    },
    metadata: {
      page: window.location.pathname,
      userAgent: navigator.userAgent,
    },
  });
</script>