4

We have several old inventory-management websites with tons of pages of poorly-documented user settings. The knowledge of how to use these settings and tools is scattered among several people at my company. It would be nice if we could add custom tool tips or sticky notes directly on the web page for others to view.

Requirements

  • Must create and display notes directly on the website, not on a copy of the page.
  • Must be able to share these notes with groups of colleagues, so they can see an icon for each of these notes when they open the live web page (if they have the browser extension installed), on the web page itself
  • Must be able to add annotations to any HTML element, not just text.
  • Need some way to specify when the annotation should appear, perhaps pattern matching? e.g. https://www.example.com/settings?user=*.
  • Needs to be able to recognize pages within an iframe and show the appropriate annotations for them
  • User can control which category of tips are visible, and can turn off tips for a given page.
  • Admin can control who can create tips, and who can only view tips.

What I have tried

Most annotation extensions I have found are for sharing bookmarks, and are geared towards collecting the info into a single location, but my objective is sort of the opposite: I want to be able to add helpful notes so my co-workers can see the information in-context, not necessarily in a central repository.

Diigo is the closest extension I found. Notes can placed on any coordinates of the page, but can't be linked to specific page elements. It has trouble with iframes, which can cause it to display the wrong annotations if a different page is displayed in the same frame. Also, you can't change all of the settings for a sticky note via the extension: sometimes you have to pull up the note on Diigo's website and change it there.

Hypothes.is comes close, but it can only add notes to text (not HTML elements in general, like DIVs), and can't annotate inside iframes.

The same is true for F1000 Annotator and Scrible Toolbar.

InsertLearning is also pretty close, but again, it can only add annotations to text, not HTML elements in general, and it's education-oriented rather than business-oriented.

WebPageStickyNotes lets me select page elements to attach the note to, and also lets me customize which pages the note should appear on, but it doesn't give me a way to let others see my notes in context. (It's also ad-supported--no paid version seems to be available--and I'm not sure if it's trustworthy).

Options to select the conditions under which a page will display annotations

Prompt to select page elements to pin the note to

Genius Web Annotator shares notes publicly, not just with my team.

Bonus points

  • G Suite integration/SSO (e.g. notes save to Google Drive or Google Keep)
  • Option to create a feature guide overlay like intro.js for new users

Examples

(Courtesy of Diigo)

Pop-up sticky note with usage tip

Example of a sticky note clarifying the purpose of a field in Wordpress

"Danger! Don't click this button" example

Conclusion

I guess I need a combination of Diigo and Web Page Sticky Notes.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.