Incoming message toast
A chat-style notification drops in from above with the sender's avatar, name and message, plus a little bounce.
Settings
Code
<div class="uv-zm"><button class="fire">New message</button><div class="toast"><i>LM</i><span><b>Lucía</b><small>See you at six?</small></span><em>ahora</em></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Toasts
Where to use it
Good for any product where people talk to each other. On a second-hand marketplace, a buyer asks “Is the bike still available?” and this chat notification toast drops in with their initials, so the seller can answer without leaving the listing. It feels like a phone notification, which is exactly what people expect from a chat.
Show a preview of the text, not just “New message”; the content is the reason to click. Make the whole toast open the conversation. If several messages arrive at once, group them by person instead of stacking one toast per line.