¿Nos recomendarías a un amigo?
Arrastra la aguja o usa las flechas
Bewertung mit Tachonadel
Bewerte von 0 bis 10 mit der Nadel eines Autotachos; sie federt über die Marke hinaus und die Zone wechselt die Farbe.
Einstellungen
Code
<div class="uvq15-nps"><p class="q">Würdest du uns einem Freund empfehlen?</p><div class="dl" role="slider" tabindex="0" aria-label="Würdest du uns einem Freund empfehlen?" aria-valuemin="0" aria-valuemax="10" aria-valuenow="7" aria-valuetext="7"><svg viewBox="0 0 200 200" aria-hidden="true"><defs><radialGradient id="uvq15-nps-f" cx="50%" cy="40%" r="65%"><stop offset="0" stop-color="#fff" stop-opacity=".12"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient></defs><circle cx="100" cy="100" r="97" class="bz"/><circle cx="100" cy="100" r="91" class="fc"/><circle cx="100" cy="100" r="91" fill="url(#uvq15-nps-f)"/><path d="M27.25 142.00A84 84 0 0 1 147.07 30.43" stroke="#ef4444" stroke-width="5" fill="none"/><path d="M151.62 33.73A84 84 0 0 1 183.20 88.43" stroke="#f59e0b" stroke-width="5" fill="none"/><path d="M183.79 94.02A84 84 0 0 1 172.75 142.00" stroke="#22c55e" stroke-width="5" fill="none"/><line x1="41.98" y1="133.50" x2="32.45" y2="139.00" class="mj"/><line x1="31.52" y1="122.25" x2="25.82" y2="124.10" class="mn"/><line x1="33.37" y1="107.00" x2="22.43" y2="108.15" class="mj"/><line x1="28.39" y1="92.47" x2="22.43" y2="91.85" class="mn"/><line x1="36.28" y1="79.30" x2="25.82" y2="75.90" class="mj"/><line x1="37.65" y1="64.00" x2="32.45" y2="61.00" class="mn"/><line x1="50.21" y1="55.17" x2="42.03" y2="47.81" class="mj"/><line x1="57.68" y1="41.75" x2="54.15" y2="36.90" class="mn"/><line x1="72.75" y1="38.79" x2="68.27" y2="28.74" class="mj"/><line x1="85.03" y1="29.57" x2="83.78" y2="23.70" class="mn"/><line x1="100.00" y1="33.00" x2="100.00" y2="22.00" class="mj"/><line x1="114.97" y1="29.57" x2="116.22" y2="23.70" class="mn"/><line x1="127.25" y1="38.79" x2="131.73" y2="28.74" class="mj"/><line x1="142.32" y1="41.75" x2="145.85" y2="36.90" class="mn"/><line x1="149.79" y1="55.17" x2="157.97" y2="47.81" class="mj"/><line x1="162.35" y1="64.00" x2="167.55" y2="61.00" class="mn"/><line x1="163.72" y1="79.30" x2="174.18" y2="75.90" class="mj"/><line x1="171.61" y1="92.47" x2="177.57" y2="91.85" class="mn"/><line x1="166.63" y1="107.00" x2="177.57" y2="108.15" class="mj"/><line x1="168.48" y1="122.25" x2="174.18" y2="124.10" class="mn"/><line x1="158.02" y1="133.50" x2="167.55" y2="139.00" class="mj"/><text x="52.37" y="127.50">0</text><text x="45.30" y="105.75">1</text><text x="47.69" y="83.00">2</text><text x="59.13" y="63.20">3</text><text x="77.63" y="49.75">4</text><text x="100.00" y="45.00">5</text><text x="122.37" y="49.75">6</text><text x="140.87" y="63.20">7</text><text x="152.31" y="83.00">8</text><text x="154.70" y="105.75">9</text><text x="147.63" y="127.50">10</text><g class="nd" transform="rotate(48 100 100)"><path d="M96 114 L100 20 L104 114 Z"/><circle cx="100" cy="100" r="9" class="hb"/><circle cx="100" cy="100" r="3" class="hc"/></g></svg><div class="rd"><b>7</b><span>Passiv</span></div></div><p class="ht">Zieh die Nadel oder nutze die Pfeiltasten</p></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Mikrointeraktionen
Alle ansehen: MikrointeraktionenWofür du ihn nutzen kannst
Weiterempfehlungsfragen bestehen meist aus einer Reihe von elf kleinen Buttons. Dieser Block legt die Bewertung auf ein dunkles Autozifferblatt: Zieh die rote Nadel oder nutze die Pfeiltasten, dann schwingt sie federnd, schießt leicht über und kommt zur Ruhe. Die Anzeige nennt die Zahl und ob es ein Kritiker, Passiver oder Promoter ist.
Der Regler Federung bestimmt, wie weit die Nadel überschwingt, von einem festen Stopp bis zu lebhaftem Pendeln. Die Hauptfarbe färbt die Nadel, die Zweitfarbe das Zifferblatt. Einsetzbar nach einem Kauf, in Feedback-Mails oder in internen Umfragen.