LMLucíaOn se voit à six heures ?ahora
HTML + CSSNotifications

Toast de nouveau message

Une notification façon messagerie qui descend d'en haut avec un petit rebond, l'avatar, le nom et le message.

Réglages

16px
1x

Code

<div class="uv-zm"><button class="fire">Nouveau message</button><div class="toast"><i>LM</i><span><b>Lucía</b><small>On se voit à six heures ?</small></span><em>ahora</em></div></div>

Prompt pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Plus dans Notifications

Où l’utiliser

Elle convient à tout produit où les gens échangent entre eux. Sur un site de vente d'occasion, un acheteur demande « Le vélo est toujours dispo ? » et la notification de message arrive avec ses initiales : le vendeur répond sans quitter son annonce. On dirait une notification de téléphone, et c'est exactement ce qu'on attend d'un chat.

Montrez un extrait du texte, pas seulement « Nouveau message » : c'est le contenu qui donne envie de cliquer. Tout le toast doit ouvrir la conversation. Si plusieurs messages arrivent d'un coup, regroupez-les par personne au lieu d'empiler un toast par ligne.