FAIR

Federated and Independent Repositories

Claraeliz Team Notes

Plugin Banner

Claraeliz Team Notes

by claraeliz

Download
Description

Claraeliz Team Notes lets admins and editors leave draggable sticky notes directly on the frontend of any WordPress page. Notes are anchored to the nearest semantic HTML element so they stay in the right position across different screen sizes and viewport widths.

Features:
* Add notes directly from the admin bar on any page — no page reload required
* Notes are anchored to the nearest semantic element using the rendered text bounding box (getClientRects()), not the container width
* Position is saved as an offset from the actual text edge — so notes stay next to the right word even when text reflows across viewport widths
* Notes reposition automatically when the layout changes (window resize, orientation change)
* Role-based note colors: neon pink for admins, neon blue for editors/authors/contributors
* Share notes with specific users using the visibility (eye) icon on each note
* Only the note author can drag, edit, delete, or share their notes
* Other logged-in users can view notes that have been shared with them
* Manage and bulk-delete your notes from the My Notes dashboard in the admin panel
* Works with Gutenberg, Elementor, and standard PHP templates
* Hidden on screens smaller than 1280px

Note colors by role:
* Administrator — neon pink (#b408a6)
* Editor, Author, Contributor — neon blue (#5b8cff)
* Text is always white on both colors for readability

Who can add notes:
* Administrator — can create, edit, drag, delete, and share notes
* Editor, Author, Contributor — can create, edit, drag, delete, and share notes
* Other roles (Subscriber, etc.) — can only view notes that have been shared with them; cannot create notes

Sharing notes:
Click the eye icon (👁) on any note you own to open the sharing popover. Check the users you want to share the note with — the selection is saved automatically. Shared users will see the note on the same page the next time they visit it while logged in.

Managing notes:
Visit My Notes in the WordPress admin sidebar to see a list of all notes you have created. You can delete notes individually or use the bulk action to delete multiple notes at once. Each user only sees their own notes in this dashboard.

  1. Upload the plugin files to /wp-content/plugins/claraeliz-team-notes/
  2. Activate the plugin through the Plugins screen in WordPress
  3. Visit any page on your site while logged in as admin or editor
  4. Click “+ Add Note” in the admin bar to create your first note
  5. Type your note content directly on the note
  6. Drag the note to the desired position on the page — it will anchor to the nearest element
  7. To share a note, click the eye icon and select the users who should see it
Who can see notes?

Notes are visible to their author and to any users the author has shared them with. Sharing is managed per note using the eye icon that appears on notes you own.

How do I share a note with someone?

Click the eye (👁) icon in the top-left corner of your note. A popover will appear listing all eligible users. Check the users you want to share with — changes are saved automatically.

Why are notes hidden on mobile?

Notes are hidden on screens smaller than 1280px because dragging and precise positioning is not practical on touch screens. Notes are visible on desktop and wide laptop displays.

What do the note colors mean?

Pink notes belong to administrators. Blue notes belong to editors, authors, and contributors. The color is assigned automatically based on the user’s WordPress role and cannot be changed manually.

Does this work with Elementor?

Yes. Claraeliz Team Notes works with Gutenberg, Elementor, Divi, and standard PHP page templates.

Will notes stay in the right position on different screen sizes?

Yes — and the positioning is more precise than a simple percentage offset. When you drop a note, the plugin uses the browser’s getClientRects() API to get the rendered bounding box of the actual text, not the width of the container element. This means:

  • On a narrow viewport a heading may wrap to two lines, ending at x:847. The note is saved as “45px to the right of where the text ends.”
  • On a wide viewport the same heading fits on one line, ending at x:1100. The note is restored at x:1100 + 45px = 1145px — still right next to where the text ends.

This works for any text element (headings, paragraphs, list items). For images and figures the image box itself is used since images scale rather than reflow.

How do I delete a note?

You can delete your own notes in two ways: click the ✕ button directly on the note on the frontend, or go to My Notes in the WordPress admin sidebar and use the Delete link or bulk delete checkboxes.

Can I see other users’ notes?

Only if they have shared those notes with you. You cannot see notes that have not been shared with you, even if you are an administrator — each user only sees their own notes and notes explicitly shared with them.

1.0.1

  • Initial release
  • Role-based note colors (pink for admins, blue for editors/authors/contributors)
  • Anchor-based positioning — notes stay near their element across screen sizes
  • Eye icon visibility popover to share notes with specific users
  • My Notes admin dashboard with individual and bulk delete
  • Works with Gutenberg, Elementor, and PHP templates
  • Hidden on screens below 1280px
Back to top