- ¿Al final quedamos el sábado?
- Yo puedo por la tarde
Chatnachricht, die nach oben fliegt
Der Text verlässt das Eingabefeld und wird zur Sprechblase, wechselt dann von gesendet über zugestellt zu gelesen, bevor eine Antwort kommt.
Einstellungen
Code
<div class="uvq15-cht"><header><span class="av" aria-hidden="true">L</span><div><b>Lola</b><small class="ty">online</small></div></header><ol class="ls" aria-live="polite"><li class="in"><span class="tx">Treffen wir uns jetzt am Samstag?</span></li><li class="in"><span class="tx">Ich kann am Nachmittag</span></li></ol><form class="cp"><input type="text" value="Perfekt, um acht?" placeholder="Nachricht schreiben" aria-label="Nachricht" autocomplete="off" enterkeyhint="send"><button type="submit" class="sd" aria-label="Senden"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"/></svg></button></form></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
Eine Nachricht abzuschicken fühlt sich besser an, wenn man sie reisen sieht. Hier gleitet der Text aus dem Eingabefeld und landet als Blase im Verlauf, der Status springt von Gesendet zu Zugestellt und Gelesen mit einem zweiten Haken, und eine Tipp-Anzeige leitet die Antwort ein. Abschicken geht mit Enter oder dem runden Button.
Die Hauptfarbe färbt deine Blasen und den Senden-Button, die Zweitfarbe die Lesebestätigung. Die erste Nachricht ist der editierbare Text, die Antworten wechseln aus einer kurzen Liste im Skript. Gut für Support-Widgets, Buchungsassistenten oder Messenger-Mockups.