AIMRAN
LMLucíaSehen wir uns um sechs?ahora
HTML + CSSToasts

Toast für neue Nachrichten

Eine Chat-Benachrichtigung, die mit kleinem Federn von oben hereinfällt, mit Avatar, Name und Nachricht.

Einstellungen

16px
1x

Code

<div class="uv-zm"><button class="fire">Neue Nachricht</button><div class="toast"><i>LM</i><span><b>Lucía</b><small>Sehen wir uns um sechs?</small></span><em>jetzt</em></div></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.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Toasts

Alle ansehen: Toasts

Animierte Toast-Benachrichtigung

ToastsReact + Motion

Elastischer Erfolgs-Toast

ToastsHTML + CSS

Toast mit Rückgängig-Button

ToastsHTML + CSS

Toast mit Upload-Fortschritt

ToastsHTML + CSS

Fehler-Toast mit Wackeln

ToastsHTML + CSS

Gestapelte Toasts

ToastsHTML + CSS

Insel-Pillen-Toast

ToastsHTML + CSS

Kalender-Toast für Termine

ToastsHTML + CSS

Wofür du ihn nutzen kannst

Passt zu jedem Produkt, in dem Menschen miteinander schreiben. Auf einem Kleinanzeigen-Marktplatz fragt jemand „Ist das Fahrrad noch zu haben?“, und die Chat-Benachrichtigung rutscht mit den Initialen herein, sodass der Verkäufer antworten kann, ohne die Anzeige zu verlassen. Sie wirkt wie eine Push-Nachricht auf dem Handy, genau das erwartet man.

Zeig einen Ausschnitt des Textes, nicht nur „Neue Nachricht“; der Inhalt ist der Grund zum Klicken. Der ganze Toast sollte das Gespräch öffnen. Kommen mehrere Nachrichten gleichzeitig, fass sie pro Person zusammen, statt einen Toast pro Zeile zu stapeln.