Umfragen und Feedback

Umfragen, Bewertungen und Feedback, die man gern ausfüllt.

3 Components · 14 Variants

Kategorie wechseln

Auf dieser Seite

Alle Components dieser Kategorie. Wähle eine, um zu ihren Variants zu springen.

NPS und Bewertungen5
Umfrage5
Feedback-Widget4

nps-feedback

NPS und Bewertungen

Eine schnelle Bewertung und eine Folgefrage, die zur Antwort passt. Ein niedriger Wert fragt, was gefehlt hat, ein hoher, was begeistert, beide mit Stichworten zum Antippen und Platz für einen Kommentar.

Weiterempfehlung
Zufriedenheit mit Gesichtern
War das hilfreich
Aufwand
Support-Bewertung

Props und Details

Weiterempfehlung

Die klassische Frage von 0 bis 10 als Kacheln, die nacheinander aufsteigen. Auf dem Telefon bricht die Skala in zwei Reihen, so bleibt jede Kachel ein volles Tippziel. Die Folgefrage öffnet sich nach der Wahl.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/nps-feedback

Bringt mit utils, kit, button, icon, textarea, reveal, section, form-flow

Usage

<NpsFeedback variant="nps" question="…" low="Not likely" high="Very likely" lowFollowUp="…" highFollowUp="…" lowReasons={[…]} highReasons={[…]} />

Source

Zufriedenheit mit Gesichtern

Fünf gezeichnete Gesichter von sehr unzufrieden bis begeistert, der Mund biegt sich mit der Stimmung. Das gewählte Gesicht wächst mit Federung und trägt den Akzent, die Folgefrage passt zur Stimmung.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/nps-feedback

Bringt mit utils, kit, button, icon, textarea, reveal, section, form-flow

Usage

<NpsFeedback variant="csat" question="How happy are you with your order?" lowReasons={[…]} highReasons={[…]} />

Source

War das hilfreich

Zwei Knöpfe am Ende eines Artikels. Ja bedankt sich sofort, Nein öffnet Gründe und Kommentar mit weicher Höhe. Der Daumen nickt kurz beim Drücken.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/nps-feedback

Bringt mit utils, kit, button, icon, textarea, reveal, section, form-flow

Usage

<NpsFeedback variant="thumbs" question="Was this page helpful?" lowReasons={[…]} article={{ title, text, updated }} />

Source

Aufwand

Wie leicht etwas war, auf sieben Stufen. Ein Messbogen neben der Karte neigt sich mit steigendem Wert zu leicht, die gewählte Kachel gleitet über die Skala und Pfeiltasten bewegen sie.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/nps-feedback

Bringt mit utils, kit, button, icon, textarea, reveal, section, form-flow

Usage

<NpsFeedback variant="effort" question="How easy was it to file your claim?" low="Very hard" high="Very easy" />

Source

Support-Bewertung

Die Abschlusskarte eines Support-Chats mit der Person, die geholfen hat, und den letzten Nachrichten. Sterne leuchten unter dem Zeiger auf und setzen sich nach der Wahl nacheinander.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/nps-feedback

Bringt mit utils, kit, button, icon, textarea, reveal, section, form-flow

Usage

<NpsFeedback variant="support-rating" question="How did Jonas help you?" agent={{ name, role }} messages={[{ from: "agent", text }]} />

Source

survey

Umfrage

Umfragen, die man gern zu Ende ausfüllt. Jede Fragenart hat ihr eigenes ruhiges Layout, ein Zähler unten zeigt, was beantwortet ist, und offene Fragen stehen über dem Formular mit einem Link zu jeder.

Skala
Matrix
Auswahl
Offene Fragen
Verzweigung

Props und Details

Skala

Aussagen auf einer Skala von eins bis fünf mit Worten an beiden Enden. Die gewählte Kachel gleitet über die Skala, Pfeiltasten bewegen sie, und die Sendeleiste bleibt beim Scrollen im Blick.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/survey

Bringt mit utils, kit, button, icon, input, textarea, switch, motion, reveal, section, form-flow

Usage

<Survey variant="scale" questions={[{ id, title, low, high, required }]} onSubmit={(answers) => …} />

Source

Matrix

Mehrere Bereiche in einer Tabelle bewertet, die Zeile unter dem Zeiger hellt auf und der Punkt springt hinein. Auf dem Telefon wird jeder Bereich eine eigene kurze Skala, nichts muss seitlich scrollen.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/survey

Bringt mit utils, kit, button, icon, input, textarea, switch, motion, reveal, section, form-flow

Usage

<Survey variant="matrix" questions={[{ id, type: "matrix", title, rows: […], points: […] }]} />

Source

Auswahl

Einfach- und Mehrfachauswahl als ruhige Zeilen in zwei Spalten. Ein Zähler zeigt, wie viele gewählt sind, und hält den Rest an der Grenze an, „Etwas anderes“ öffnet ein eigenes Feld mit weicher Höhe und bekommt den Fokus.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/survey

Bringt mit utils, kit, button, icon, input, textarea, switch, motion, reveal, section, form-flow

Usage

<Survey variant="choice" questions={[{ id, type: "single", options: […], other: true }, { id, type: "multi", max: 3, options: […] }]} />

Source

Offene Fragen

Offene Fragen mit Satzanfängen zum Antippen, der Anfang landet im Text und der Cursor wartet dahinter. Ein Schalter erlaubt anonyme Antworten, Name und E-Mail klappen weg, solange er an ist.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/survey

Bringt mit utils, kit, button, icon, input, textarea, switch, motion, reveal, section, form-flow

Usage

<Survey variant="open" questions={[{ id, type: "text", title, prompts: […], maxLength: 600 }]} anonymous />

Source

Verzweigung

Eine Frage nach der anderen, und die Antwort entscheidet, welche als Nächstes kommt. Daneben wächst der bisherige Weg mit jeder Antwort und nennt, wie viele Fragen für diese Person übersprungen wurden.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/survey

Bringt mit utils, kit, button, icon, input, textarea, switch, motion, reveal, section, form-flow

Usage

<Survey variant="branching" questions={[{ id: "why", type: "single", options: […], next: { "Too expensive": "price", "*": "keep" } }]} />

Source

feedback-widget

Feedback-Widget

Feedback von jeder Seite. Ein Reiter am Rand, ein runder Knopf mit schnellen Reaktionen, die genaue Stelle auf der Seite markieren und ein vollständiger Fehlerbericht mit ausgefülltem Gerät. Schwebende sitzen über dem Fenster oder mit contained in einem Rahmen.

Reiter am Rand
Knopf mit Reaktionen
Stelle markieren
Fehlerbericht

Props und Details

Reiter am Rand

Ein Reiter am rechten Rand gleitet weg und ein Panel gleitet herein, auf dem Telefon ein Sheet von unten. Die Art des Feedbacks in einer Leiste mit gleitender Kachel, das Textfeld fragt passend zur Art.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/feedback-widget

Bringt mit utils, kit, button, icon, input, textarea, reveal, section, form-flow

Usage

<FeedbackWidget variant="side-tab" categories={[{ value, label, icon, prompt }]} onSubmit={(data) => …} />

Source

Knopf mit Reaktionen

Ein runder Knopf, dessen Symbol sich in ein Schließen dreht. Ein Tipp auf eine Reaktion ist schon Feedback, darunter öffnet sich ein Kommentarfeld für alle, die mehr sagen wollen.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/feedback-widget

Bringt mit utils, kit, button, icon, input, textarea, reveal, section, form-flow

Usage

<FeedbackWidget variant="bubble" categories={[{ value: "love", label: "Love it", icon: "heart" }, …]} />

Source

Stelle markieren

Besucher markieren die genaue Stelle mit einem Fadenkreuz, per Zeiger oder mit den Pfeiltasten, dort pulsiert eine nummerierte Nadel. Das Panel zeigt die Stelle in einem kleinen Umriss der Ansicht und fragt, was dort nicht stimmt.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/feedback-widget

Bringt mit utils, kit, button, icon, input, textarea, reveal, section, form-flow

Usage

<FeedbackWidget variant="screenshot" onSubmit={({ spot, message }) => …} />

Source

Fehlerbericht

Ein vollständiger Bericht direkt auf der Seite. Schritte zum Nachstellen als nummerierte Liste, die wächst, erwartet und tatsächlich nebeneinander, und das Gerät aus dem Browser gelesen in einer Seitenspalte, damit man sieht, was mitgeht.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/feedback-widget

Bringt mit utils, kit, button, icon, input, textarea, reveal, section, form-flow

Usage

<FeedbackWidget variant="bug-report" title="Report a problem" onSubmit={(report) => …} />

Source

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Umfragen und Feedback stehen.

Auf dieser Seite

Weiterempfehlung

Zufriedenheit mit Gesichtern

War das hilfreich

Aufwand

Support-Bewertung

Skala

Matrix

Auswahl

Offene Fragen

Verzweigung

Reiter am Rand

Knopf mit Reaktionen

Stelle markieren

Fehlerbericht

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit