RocketChat
# Feature Request: Copy Email Button in User Info Panel
📌 Feature Summary
Add a copy-to-clipboard icon/button next to email addresses in the User Info panel (contextual bar) so users can quickly copy an email address with a single click.
This is a small UI enhancement that significantly improves usability, especially for admins, moderators, and support teams.
🎯 Problem Statement
Currently, when viewing a user’s information in the User Info panel, email addresses are displayed as plain text. To copy an email, users must:
- Manually select the text
- Right-click or use keyboard shortcuts
This is inefficient and inconsistent with modern UX expectations.
✅ Proposed Solution
- Add a copy icon/button next to each email address
- Clicking the icon copies the email address to the clipboard
- Show a tooltip (e.g.,
Copy email) - Optionally show a success feedback (toast or tooltip:
Copied!)
✨ Expected Behavior
- Email addresses remain readable
- A copy icon appears next to the email
- One click copies the email to clipboard
- No page reload or navigation required
❌ Current Behavior
- Email addresses are displayed as static text
- Copying requires manual selection
- Slower workflow for frequent administrative tasks
I am willing to add a PR.
### Can you assign me that query. I'm passionate to tackle that issue using these steps-
- In Html file I take [email protected]
- and I can put icon also if you want.
- In JavaScript copyButton= document.querySelector ('#copy-button');
-
const email Element = document.querySelector ('#email'); -
copyButton.addEventListener('click' , () => {const email = emailElement.textContent; - navigator.clipboard.writeText(email).then(() => {console.log('Email copied');}).catch(err => { console.error('Failed to copy email: ' , err);}) ; } Summary How I solve it- I would try to put copy icon in the box of email at right hand side of course with some padding. When user after click at the copy icon it copies their email and show copied at the bottom of copy icon. If you want to give any change, I will try your expectation match my work. @maintainer
i am already working on this bro plz............. follow guidelines
I'm sorry dude I'm not seen your profile. I really apologize for that behavior.
Great feature request! I'd like to work on this UI enhancement. Here's my comprehensive implementation approach:
1. Component Analysis:
- Locate User Info Panel component (likely in user profile/info section)
- Identify where email addresses are currently displayed as plain text
- Review existing copy-to-clipboard implementations in codebase
2. Implementation Details:
A. UI Component:
- Add icon button next to each email address
- Use standard clipboard icon (copy icon from Rocket.Chat icon library)
- Style to match existing buttons (subtle, accessible on hover)
- Implement proper spacing and alignment
B. Functionality:
- Click handler that copies email to clipboard using navigator.clipboard.writeText()
- Fallback for older browsers using deprecated document.execCommand('copy')
- Visual feedback:
- Tooltip on hover: "Copy email"
- Success message: Toast notification or brief tooltip "Copied!"
- Button state change (optional: briefly highlight)
C. Code Implementation:
- React functional component or hook for copy logic
- Reusable CopyButton utility component
- Handle error cases gracefully
- Proper a11y attributes (aria-label, title, role)
3. File Changes Required:
- User Info Panel component
- Possibly create/update copy utility
- Update any email field display logic
4. Testing Plan:
- Manual test: Click copy button, verify clipboard content
- Test on different browsers (Chrome, Firefox, Safari, Edge)
- Test accessibility with keyboard navigation
- Verify tooltip/toast messages appear correctly
- Test with multiple emails if applicable
5. UX Considerations:
- Icon visibility without being obtrusive
- Touch-friendly on mobile devices
- Clear visual feedback
- Consistent with RocketChat design language
- Localized success message
Ready to implement and submit a PR following RocketChat guidelines!
