webdevpuneet.com

Related Snippets

144 in Dashboards category
53–58 of 60

Admin Impersonation Mode Banner — "Viewing As" with Safe Exit

Batch Operation Progress Panel — Per-Item Success/Fail Tracking

Deployment Pipeline Stage Tracker

Database Connection Pool Monitor Tile

Alert Rule Threshold Builder

Scheduled Job Run History Tile

Admin Impersonation Mode Banner — "Viewing As" with a Safe, Confirmed Exit

Admin Impersonation Mode Banner — "Viewing As" with Safe Exit · Dashboards · Plain HTML, CSS & JS · Live preview

CategoryDashboards
TagsKeyboard NavigationCSS AnimationDashboard UI

Copy & paste

Source Code

<div class="demo">
  <div class="imp-banner" id="impBanner" role="status">
    <div class="imp-left">
      <span class="imp-dot"></span>
      <span class="imp-text">
        You're viewing the app as <strong>Dana Whitfield</strong> ([email protected]) — actions taken here affect their account.
      </span>
    </div>
    <button class="imp-exit" id="impExit">Exit impersonation</button>
  </div>

  <div class="app-shell">
    <header class="app-header">
      <span class="app-brand">Nimbus Admin</span>
      <div class="app-avatar" id="appAvatar" title="Dana Whitfield">DW</div>
    </header>
    <main class="app-main">
      <h3>Dashboard</h3>
      <p class="app-note">This area represents the normal app UI — notice it stays fully usable underneath the banner rather than being blocked by it.</p>
    </main>
  </div>

  <div class="imp-confirm" id="impConfirm" hidden>
    <div class="imp-confirm-box">
      <p>Return to your own admin account?</p>
      <div class="imp-confirm-actions">
        <button class="btn ghost" id="stayBtn">Stay</button>
        <button class="btn primary" id="confirmExitBtn">Yes, exit</button>
      </div>
    </div>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Deliberately high-contrast banner styling, visually distinct from every other UI element to avoid being tuned out
Persistent and always visible above the app content, never blocking interaction with the underlying UI
Two-step confirmed exit (open confirm, then explicit second click) rather than a single-click exit action
Escape key on the confirmation step safely cancels back to "stay in impersonation," matching the Stay button
Banner and header avatar transition out together as one synchronized change, avoiding any inconsistent in-between state
role="status" marks the banner as an informational live region without triggering an urgent screen-reader interruption
Pulsing indicator dot reinforces that impersonation is an active, ongoing state rather than a one-time notice

About this UI Snippet

Impersonation Mode Banner — Making an Unusual, Risky State Impossible to Miss

Screenshot of the Admin Impersonation Mode Banner — "Viewing As" with Safe Exit snippet rendered live

"Log in as this user" (impersonation) is a common support and debugging tool in admin panels — but it's also genuinely risky: an admin who forgets they're impersonating someone could take an action that silently affects that user's real account, believing they're still in their own. This snippet solves that with two deliberate design decisions: a banner that's visually impossible to mistake for normal UI, and an exit action that requires explicit confirmation rather than a single accidental click.

Why the banner uses a completely different visual language than the rest of the UI

The banner's dark amber/brown background and pulsing dot are intentionally jarring against the clean white app UI beneath it — this is not a subtle notification, it's meant to be the single most visually distinct element on the entire screen for as long as impersonation is active. A subtle badge or a small icon in a corner would be easy to stop consciously registering after a few seconds; a persistent, high-contrast, animated banner at the very top of the viewport is much harder to tune out, which is exactly the point given the stakes of forgetting this mode is active.

Exiting requires two separate, deliberate actions

Clicking "Exit impersonation" doesn't exit immediately — it opens a small confirmation step requiring a second, explicit "Yes, exit" click (or an Escape/Stay to cancel). This two-step pattern is a deliberate friction: unlike many confirm dialogs added merely to slow down a *destructive* action, this one exists because exiting impersonation *mid-task* — say, half-way through reproducing a support ticket on the user's behalf — could be just as disruptive as staying in it too long by accident. Requiring one extra explicit click ensures the admin only leaves impersonation mode when they actually mean to.

The avatar and banner change together, as one atomic visual transition

When exit is confirmed, the banner fades and slides out at the same time the header avatar swaps from the impersonated user's initials (amber-themed, matching the banner) back to the admin's own initials (blue-themed, matching the rest of the app's normal UI). Tying these two visual changes to the same transition means there's never a moment where the banner has disappeared but the avatar still shows the impersonated user, or vice versa — the whole UI transitions out of impersonation mode as one coherent, correctly-timed change.

role="status" on the banner, not a generic div

The banner carries role="status", marking it as a live region that assistive technology treats as informational and non-interruptive — appropriate for a persistent state indicator that a screen reader user should be made aware is present, without it demanding the same urgent, must-act-now announcement a role="alert" would trigger for what is, functionally, an ongoing state rather than a one-time event.

Step by step

How to Use

  1. 1
    Observe the banner while impersonation is activeA high-contrast, pulsing banner stays fixed above the normal app UI, naming exactly which user is being impersonated.
  2. 2
    Interact with the app underneath normallyThe banner never blocks the rest of the interface — it sits above it, always visible, while the admin continues working as the impersonated user.
  3. 3
    Click "Exit impersonation"Opens a small confirmation step rather than exiting immediately — a deliberate friction point given how disruptive an accidental exit or an accidental continued-impersonation could be.
  4. 4
    Click "Stay" or press EscapeCancels the exit and returns to impersonation mode with no change.
  5. 5
    Click "Yes, exit"The banner and the impersonated-user avatar transition out together, returning the interface to the admin's own identity as one coherent, correctly-synced change.

Real-world uses

Common Use Cases

SUPPORT
Customer support "login as user" tools
Support agents debugging an issue from inside a customer's account need an unmistakable reminder they are not in their own account.
ADMIN
Internal admin panels with user impersonation
Any admin tool allowing staff to view the app as another user for troubleshooting or verification purposes.
QA
QA and testing as a specific user role
Testers verifying role-specific behavior by impersonating different account types benefit from a clear, persistent mode indicator.
COMPLIANCE
Auditable elevated-access sessions
Any elevated or delegated access session where the interface should make the unusual state impossible to overlook, supporting compliance requirements around such access.
Related: JSON Diff Viewer
See the JSON Diff Viewer for a related dashboards pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

Because both leaving impersonation prematurely (mid-task) and staying in it too long unintentionally are genuinely disruptive outcomes. A single accidental click on an exit button could interrupt an in-progress support task; requiring an explicit second confirmation click ensures the admin only exits when they actually intend to.

A subtle indicator (a small badge or icon) is easy to stop consciously noticing after a few seconds of continuous exposure. The banner's deliberately jarring, high-contrast styling and pulsing dot are designed specifically to remain noticeable for the entire duration impersonation is active, given the real risk of an admin forgetting they're impersonating someone.

It has the same effect as clicking "Stay" — the confirmation closes and impersonation mode continues uninterrupted. Escape is treated as a safe cancel action here, never as a shortcut that could accidentally trigger the exit.

No — it's a persistent header element, not a modal overlay. The admin can continue using the rest of the interface completely normally while the banner remains visible above it as a constant reminder.

Tying both visual changes to the same transition timing guarantees there is never an inconsistent in-between moment where, for example, the banner has already disappeared but the header avatar still shows the impersonated user's initials.

role="alert" is meant for urgent, one-time interruptions that demand immediate attention. Impersonation is an ongoing state rather than a one-time event, so role="status" — a live region for informational, non-interruptive updates — is the more accurate semantic for a screen reader user encountering this banner.