Extensible developer toolkit for CXone Expert with CSS/HTML editors, live preview, and more.
Add this single line to the <head> of your CXone Expert site:
<script src="https://releases.benelliot-nice.com/cxone-expert-enhancements/latest/expert-enhancements-embed.js"></script>✅ Auto-updates to newest releases ✅ Always get bug fixes and features ✅ Recommended for most users
<script src="https://releases.benelliot-nice.com/cxone-expert-enhancements/releases/v1.3.0/expert-enhancements-embed.js"></script>✅ Stays on specific version forever
✅ Perfect for production stability
✅ Replace v1.2.0 with your desired version
Once loaded, a floating toggle button appears in the top-right corner. Click it to access the editor tools.
- Live Preview - See changes in real-time without saving
- Monaco Editor - Same powerful editor as VS Code
- Role-Based Editing - Separate CSS for different user roles
- All Roles
- Anonymous
- Community Member
- Pro Member
- Admin
- Legacy Browser
- Auto-Complete - Context-aware CSS suggestions from your page
- Syntax Highlighting - Full CSS language support
- Dirty State Tracking - Visual indicators show unsaved changes (✓/●)
- Draggable & Resizable - Position and size to fit your workflow
- Fullscreen Mode - Double-click header to maximize
- Mobile Responsive - Automatically adapts to smaller screens
- Persistent Storage - Your changes survive page reloads
- Direct Save - Saves directly to CXone Expert control panel
- Export - Download individual or all CSS files
- Multiple Editors - Toggle between CSS and HTML editors
- Split View - Show up to 3 editors simultaneously
- CSRF Protection - Automatic security token handling
- localStorage Backup - Never lose your work
- Error Recovery - Graceful handling of save failures
Coming soon - screenshots of the editor in action
- Click the floating toggle button
- Select "CSS Editor" from the dropdown
- Click "All Roles" tab
- Start typing your CSS
- See live preview instantly
- Click "Save All" when ready
- Open CSS Editor
- Click the role tab you want to edit (e.g., "Anonymous")
- Make your changes
- Each role's CSS is saved independently
- Open CSS Editor
- Click dropdown arrow next to "Save All"
- Select "Export All" or individual role exports
Upcoming features and modules:
- IntelliSense/Autocomplete (#42) - Enhanced CSS property suggestions
- Code Formatting (#44) - Auto-format CSS/HTML on save
- Drag & Drop Import (#45) - Import CSS files by dragging
- Browser Extension (#54) - Replace bookmarklet with proper extension
- New Apps:
- Demo Builder (#57) - Build demos with CSS extraction
- Image Optimizer (#56) - Optimize images for performance
- Styling Best Practices Checker (#58) - Lint your CSS
See open issues for full roadmap.
Problem: No floating toggle button visible Solutions:
- Hard refresh: Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)
- Check browser console for errors (F12)
- Verify embed script URL is correct
- Ensure you have admin permissions on CXone Expert
Problem: Save button does nothing or shows error Solutions:
- Check that you're logged in to CXone Expert
- Verify you have permission to edit CSS
- Try refreshing and loading the editor again
- Check browser console for error messages
Problem: CSS reverts to previous version Solutions:
- Click "Save All" before closing (not just preview)
- Check that save completed successfully (green checkmark)
- Verify localStorage is enabled in your browser
Problem: Performance issues when typing Solutions:
- Close other browser tabs to free memory
- Disable live preview toggle if too slow
- Try refreshing the page
- Clear browser cache
Problem: "Storage quota exceeded" error Solutions:
- Export your CSS before clearing
- Clear old localStorage data in DevTools
- Typical quota: 5-10MB per domain
Problem: Changes don't appear until saved Solutions:
- Ensure live preview toggle is ON (check for indicator)
- Try typing in the editor to trigger preview
- Refresh page and re-open editor
Q: Is this safe to use in production? A: Yes! The latest version is stable and tested. For maximum safety, use a pinned version.
Q: Will this slow down my site? A: No. The embed script is tiny (~10KB) and loads asynchronously. Editors only load when you click the toggle button.
Q: Can I use this on multiple CXone Expert sites?
A: Yes! Just add the embed script to each site's <head>.
Q: What happens if I have unsaved changes and close the editor? A: Your changes are preserved in localStorage. Re-open the editor to continue editing.
Q: Can multiple people edit CSS at the same time? A: The editor doesn't have real-time collaboration. Last save wins. Coordinate with your team to avoid conflicts.
Q: How do I uninstall?
A: Simply remove the <script> tag from your site's <head>. No other cleanup needed.
Q: Does this work offline? A: No. The editor requires internet connection to load Monaco Editor from CDN.
Q: Which browsers are supported? A: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+. Modern browsers only.
Q: Can I customize the colors or position? A: Not yet, but configurable options are planned (#48). For now, you can drag/resize the overlay.
Q: Where is my CSS actually saved? A: Two places: (1) CXone Expert's database when you click "Save All", (2) Your browser's localStorage as a backup.
We welcome contributions! To get started:
- Read the Development Guide
- Check open issues
- Fork the repository
- Create a feature branch
- Submit a pull request
Developer Resources:
- Development Setup - Local setup and workflow
- Git Workflow - Branching and release process
- Deployment Guide - CI/CD and deployments
- Architecture - Technical architecture
ISC
- Issues: GitHub Issues
- Discussions: GitHub Discussions
- Documentation: docs/
- Built with Monaco Editor - The code editor that powers VS Code
- Hosted on Digital Ocean Spaces
- Automated with GitHub Actions
Current version: 1.2.0
See releases for changelog and version history.
🤖 Built with Claude Code