Give and get feedback easily with Hannotaatio

Click the feedback button to capture the page

Draw annotations on top of the page

Publish and share it with stakeholders

Watch the one-minute screencast

Try it

Go and try out the example sites below!

Generic website

Capture and annotate a generic website template

Hair salon

Use username hannotaatio and password demo and open the captured site on another browser to really see that the images were captured

Installation

You can take Hannotaatio into use by simply adding the snippet below at the bottom of the page <body>

<script type="text/javascript">
  (function(d, t) {
    var h = d.createElement(t), s = d.getElementsByTagName(t)[0];
    h.type = "text/javascript"; h.async = 1; h.src = "//hannotaatio.futurice.com/hannotaatio.js";
    s.parentNode.insertBefore(h, s);
  })(document, 'script');
</script>

Installation for production

For production use we recommend you to generate an API key and provide us an email address. Please type a valid email address we can inform you about service breaks and updates.

Generate API key

Advanced options

As with the API key, you set parameters to Hannotaatio using global window._hannotaatioPreferences variable. _hannotaatioPreferences is a plain JavaScript object which takes key/value pairs.

	Value	Description
apiKey	string	Your API key.
captureStylesheets	true / false	Captures stylesheets linked to the page. Only stylesheets hosted on the local domain will be captured.
captureImages	true / false	Captures images on the page.
crossDomainFileAvailable	true / false	Due to Flash security restrictions, a `crossdomain.xml` file has to be available from the server root, e.g., http://mydomain.com/crossdomain.xml. Example of crossdomain.xml
notificationEmails	Array of strings	List of email addresses where a notification email will be sent to after a new Hannotaatio has been published. At sign (@) and dots (.) can be replaced with `' at '` and `' dot '`. See the example below.

Complete example of advanced options

<script type="text/javascript"> 
  window._hannotaatioPreferences = {
    apiKey: 'XXXXXXXXXXXXXXX'

    /* Advances options */

    captureStylesheets: true,

    captureImages: false,

    crossDomainFileAvailable: false,

    notificationEmails: [
      'developer@hannotaatio.com',
      'project dot manager at hannotaatio dot com'
    ]
  };
</script>
<script type="text/javascript">
  (function(d, t) {
    var h = d.createElement(t), s = d.getElementsByTagName(t)[0];
    h.type = "text/javascript"; h.async = 1; h.src = "//hannotaatio.futurice.com/hannotaatio.js";
    s.parentNode.insertBefore(h, s);
  })(document, 'script');
</script>

Experimental: Use it on any page

Drag or save this link to your bookmarks: Enable Hannotaatio

Security and privacy

Hannotaatio is a very early stage experimental app. Thus, data security has not been our main concern at this point. The stored data (i.e. captured websites, annotations, notification emails) are stored on our database as such without encryption. Due to this, Hannotaatio is probably not suitable for highly confidential content.

To achieve a full control over the stored data, you can install your own instance of Hannotaatio.

Note that Hannotaatio does not require any authentication to view a annotated site if the viewer knows the URL address. In other words, share the URL of the annotation only with the people who should be able to view it.