Someone joined toast
A colored cursor with the person's name drifts into the document as the toast says they joined.
Settings
Code
<div class="uv-qpj"><button type="button" class="fire">Show again</button><span class="cu" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4 3l15 7.5-6.5 1.8L10 19z"/></svg><b>Marta</b></span><div class="tt" role="status"><span class="av" aria-hidden="true">MR<i></i></span><span class="tx"><b>Marta joined the document</b><small>3 people are editing now</small></span><span class="st"><i style="--c:#3b82f6"></i><i style="--c:#f59e0b"></i><i style="--c:var(--c1)"></i></span></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
See all ToastsWhere to use it
Collaborative editors show presence in real time, and a join notification works better when it looks like the collaboration itself. When this toast appears, a pink cursor with a name label glides into the stage and wanders a little, while the toast shows the avatar with an online dot, the message and a stack of everyone editing, with the newcomer popping in.
Use it in docs, whiteboards, design tools or shared spreadsheets. The cursor is decorative and hidden from assistive technology, and the main color sets the cursor, avatar ring and the newcomer dot.