feedbackfin -Download - feedbackfin -Quellcode herunterladen

feedbackfin

Website-Daten

v1.0.3

Herunterladen

Feedback Fin

Ein kleines Widget, um überall auf Ihrer Website Feedback zu sammeln. Das war's.

Website • Zwietracht • Twitter

Versuchen Sie das Widget ↗

Schneller Start

Laden Sie das Widget auf Ihrer Seite:

 < script src =" https://unpkg.com/feedbackfin@^1 " defer > </ script >

Richten Sie eine Webhook -URL ein (lesen Sie Anweisungen im nächsten Abschnitt) und konfigurieren Sie diese im Skript. Fügen Sie optional alle Benutzerinformationen hinzu, die Sie von der Website weitergeben möchten:

 < script >
  window . feedbackfin = { config : { } , ... window . feedbackfin } ;
  window . feedbackfin . config . url = "https://rowy-hooks.run.app/wh/..." ;
  window . feedbackfin . config . user = { name : "..." , email : "..." } ;
</ script >

Stellen Sie eine Schaltfläche ein, um das Widget zu öffnen:

 < button data-feedbackfin-button > Feedback </ button >

Einrichten einer Webhook -URL

Dies ist die URL, an die das Feedback gesendet wird. Das Widget stellt diese URL mit den Feedback -Daten als JSON -Körperschaft an diese URL.

Generieren Sie eine Webhook-URL mit der Low-Code-Plattform von Rowy und verwalten Sie Feedback-Daten auf einer kollaborativen Tabelle. Optional können Sie das eingehende Feedback mit dem integrierten Code-Editor von Rowy weiter automatisieren (z. B. in Team Slack/Discord, E-Mail-Follow-up usw.).

End-to-End-Videoanweisungen auf der Website ↗

Optionen

Optionen sind im window.feedbackfin.config festgelegt.feedbackfin.config -Objekt:

`url`

Die URL, um das Feedback an zu senden. Das Widget stellt diese URL mit den Daten als JSON -Karosserie an. Sehen Sie sich oben eine Webhook -URL ein.

`user`

Ein Objekt, dessen Inhalt als Teil des Formulars eingereicht wird. Hinweis: feedbackType , message und timestamp sind reservierte Felder und werden durch Formularwerte überschrieben.

Typisch:

 window . feedbackfin . config . user = {
  name : "..." ,
  email : "..." ,
} ;

`disableErrorAlert`

Deaktiviert optional das Anzeigen von Warnungen, wenn keine URL festgelegt ist oder die Anforderung fehlschlägt. Standard: disableErrorAlert: false

Wie es funktioniert

Wenn das Skript geladen wird, sucht es nach Elementen mit dem Attribut data-feedbackfin-button und öffnet das Widget, wenn eines dieser Elemente geklickt wird.

 < button data-feedbackfin-button > Feedback </ button >

Das window.feedbackfin -Objekt enthält die Methoden der open , close und submit , damit sie auch direkt aufgerufen werden können.

 < button onclick =" window.feedbackfin.open(event) " > Feedback </ button >

Das Widget verwendet event.target , um seine Position mit schwimmender Benutzeroberfläche zu berechnen.

Anpassung

Das Widget ist kurz vor dem Abschluss </body> Tag, wenn es geöffnet ist, und respektiert font-family Ihrer Seite. Die Stile sind kurz vor dem Eröffnungs <head> angehängt, sodass Ihre Anpassungen Vorrang haben.

Sie können das Erscheinungsbild des Widgets anpassen von:

Überschreiben Sie die CSS -Variablen.

Beispielsweise können Sie die primäre Schaltflächenfarbe mit:

 : root {
  --feedbackfin-primary-color : # 007aff ;
  --feedbackfin-primary-color-text : # fff ;
}

Die CSS -Regeln überschreiben. Klassennamen werden mit feedbackfin__ vorangestellt.

Dunkler Modus

Der dunkle Modus wird aktiviert, wenn beide:

Der Benutzer setzt sein Systemthema auf Dunkelheit
dh @media (prefers-color-scheme: dark) ist wahr oder
Jedes übergeordnete Element verfügt über ein data-theme -Attribut, dessen Wert dark enthält.
Beispiel: <body data-theme="dark">

Die Farben des Dunklen Modus werden mit CSS -Variablen eingestellt. Sie können sie überschreiben mit:

 @media ( prefers-color-scheme : dark) {
  : root {
    ...;
  }
}

[ data-theme *= "dark" ] {
  ...;
}

Zugänglichkeit

Dieses Widget wird unter Verwendung von Standard -HTML -Formularelementen mit den entsprechenden Etiketten erstellt.

Der Fokus wird im Widget gefangen, wenn es mit Focus-Trap geöffnet ist. Seien Sie vorsichtig, wenn Sie dieses Widget in einem anderen Element mit einer Fokusfalle nisten.