Reunión de equipo10:30 · 4 personas esperando
Este sitio quiere
videollamada.app
Usar tu cámara
Usar tu micrófono
Browser camera permission prompt
A bubble that drops from the address bar to ask for camera and microphone; the call turns on or gets blocked by your choice.
Settings
Code
<div class="uvq13-prm" data-p="ask"><div class="tb"><span class="dots" aria-hidden="true"><i></i><i></i><i></i></span><div class="ad"><button type="button" class="fire" aria-haspopup="dialog" aria-label="Site permissions"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h10M18 7h2M4 17h4M12 17h8"/><circle cx="16" cy="7" r="2"/><circle cx="10" cy="17" r="2"/></svg></button><span class="url">videollamada.app/equipo</span><span class="cam" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="7" width="12" height="10" rx="2"/><path d="M15 10.5l6-3v9l-6-3"/></svg><i></i></span></div></div><div class="lob"><div class="vid"><span class="st s0"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="7" width="12" height="10" rx="2"/><path d="M15 10.5l6-3v9l-6-3M3 3l18 18"/></svg><span>Camera off</span></span><span class="st s2"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M6 6l12 12"/></svg><span>You blocked the camera</span><button type="button" class="chg">Change permission</button></span><span class="me" aria-hidden="true"><i class="hd"></i><i class="bd"></i><i class="lv"><b></b><b></b><b></b></i></span><small class="tag">You</small></div><p class="mt"><b>Team meeting</b><small>10:30 · 4 personas esperando</small></p><button type="button" class="jn">Join now</button></div><div class="po" role="dialog" aria-modal="true" aria-labelledby="uvq13-prm-t"><button type="button" class="x" aria-label="Close"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button><p class="ti" id="uvq13-prm-t">This site wants to</p><p class="dm">videollamada.app</p><p class="rw"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="7" width="12" height="10" rx="2"/><path d="M15 10.5l6-3v9l-6-3"/></svg><span>Use your camera</span></p><p class="rw"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21"/></svg><span>Use your microphone</span></p><div class="ac"><button type="button" data-v="on">Allow while visiting the site</button><button type="button" class="b2" data-v="on">Allow this time</button><button type="button" data-v="no">Don't allow</button></div></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 Overlays
See all OverlaysWhere to use it
Video apps live or die by the permission prompt, and this mock lets you design around it. Allowing turns the lobby tile into a live preview and adds a recording dot to the address bar, while blocking shows how to change it. It suits onboarding guides, help pages and product tours.
The main color is used for buttons and the avatar, the second one for the recording dot. Change the domain and the request text, and reopen the bubble from the address bar icon or from the blocked tile to test every path.