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
Ver todos: ToastsDó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.