Toast de mensaje entrante
Una notificación tipo chat que cae desde arriba con avatar, nombre, mensaje y un pequeño rebote.
Ajustes
Código
<div class="uv-zm"><button class="fire">Nuevo mensaje</button><div class="toast"><i>LM</i><span><b>Lucía</b><small>¿Nos vemos a las seis?</small></span><em>ahora</em></div></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Toasts
Dónde usarlo
Encaja en cualquier producto donde la gente habla entre sí. En una web de segunda mano, un comprador pregunta «¿Sigue disponible la bici?» y la notificación de chat baja con sus iniciales, así el vendedor contesta sin salir del anuncio. Se parece a una notificación del móvil, que es justo lo que la gente espera de un chat.
Enseña un trozo del texto, no solo «Nuevo mensaje»; el contenido es lo que invita a pulsar. Haz que todo el toast abra la conversación. Si llegan varios mensajes a la vez, agrúpalos por persona en lugar de apilar uno por línea.