Adding Annotations to Web Content with Annotator.js

Annotator.js is an open-source (available on GitHub) JavaScript library created by the Open Knowledge Foundation that allows you to add annotations to web pages. Annotations can be personal (only seen by you), or can be permissions based, providing functionality to limit who is able to view, add or edit annotations.

The annotations themselves are not stored within the web pages themselves, instead being hosted elsewhere, and inserted in to the page on load using JQuery. Annotations can be stored in your own storage system or using the free AnnotateIt service, also provided by the Open Knowledge Foundation.

The Annotator library is very extensible and includes default plugins for features such as user accounts, tags, filtering and formatting. An API is provided, allowing you to write your own plugins. Annotator is well documented and includes a plethora of help pages on the Annotator wiki.

To get started, you should read the Getting Started guide. To learn about setting Annotator up to use permissions with authentication, you should read the Authentication Guide, and the Auth Plugin page. If you want to store annotations on your own hardware, you should read the Storage Guide, and the Store Plugin page.

To see how our software is already being used in a system alongside Annotator.js, you can read about how the University of Mississippi’s School of Pharmacy use Annotator.js with our software here.

This article is part of a series of articles with suggestions for enhancing your HTML5 content. You can also read about Adding Fullscreen using the JavaScript FullScreen API, Optimising Images using PNGQuant, Password Protecting content with Apache htaccess, and Measuring Content Performance with Google Analytics.

If you’re a first-time reader, or simply want to be notified when we post new articles and updates, you can keep up to date by social media (TwitterFacebook and Google+) or the Blog RSS.

Related Posts:

The following two tabs change content below.
Leon is a developer at IDRsolutions and product manager for JPDF2HTML5. He is responsible for managing the JPDF2HTML5 product strategy and roadmap, and also spends a lot of his time writing code to build new features, improve functionality, fix bugs, and improve the testing for JPDF2HTML5.
Leon Atherton

About Leon Atherton

Leon is a developer at IDRsolutions and product manager for JPDF2HTML5. He is responsible for managing the JPDF2HTML5 product strategy and roadmap, and also spends a lot of his time writing code to build new features, improve functionality, fix bugs, and improve the testing for JPDF2HTML5.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>