Annotation Tools Backup

At zipBoard, we put a lot of emphasis on  asynchronous collaboration, but that does not have to be on spreadsheets and team messages only. You can take your content and document collaboration further with annotations. Leave notes directly on your websites, videos, images, courses, and PDF documents - so that all communication is in-context and everyone stays in sync.

This feature is available to all users for many different content types. You will need to download a one-time  browser plugin to use the annotation features. Soon, for some content types, you will not need the browser plugin.

Here’s a short video explaining the various annotation tools:

Adding annotations

To start adding annotations to existing content, you first  add content to your project. After clicking Review on the content added, you will see the annotation and commenting tools on the left. You can pick any of the tools to start drawing or simply add comments.

By default, the annotation tools will be displayed on the left side of your screen. This review bar is easily draggable. You can drag and place it anywhere on your content. Allowing you to review the content with no impediment.

The various annotation tools at your disposal

Now that we know how you can start your review for a file, let’s talk about all the annotation tools. So, here are the tools  that you can use to review your content.

A. Comment

Let’s talk about the first tool in your arsenal. The comment tool. This is the simplest tool to leave contextual feedback on any content.

To use the tool, simply click on the second icon which once hovered over spells, “Comment”. Once you click it, it will turn green which means now you are ready to add comments/feedback on your content using the comment tool. Now  click anywhere on the file to add a comment. You’ll notice that there’s a checkbox, “Add as task”. If you untick this, your feedback will simply go in the comment section and will not be added as a task. Although you will have an option to add it as a task later on from within the dashboard. Once you’re ready, simply type your feedback and hit send. zipBoard will record your feedback.

With a dot a signify its placement, we’ve found that our users love this the most. But fret not, there are many more tools designed specifically to match our user’s unique use cases.

B. Pencil

Moving on to our next tool. To use the pencil tool, simply select the third icon, pencil. And as you might have guessed, you can now start using this review tool like a pencil. (I’ve personally found it interesting trying to write one's name with it. But we’re deviating.)

Here, we have 2 options in the Pencil,

1. Pencil mode

Once you’ve selected the tool, simply click and drag your cursor to draw. The pencil tool can be used to circle, underline or even highlight elements (more on this soon) within the content. After you've drawn, a comment box will appear to add the annotation. Click “Add” to save the annotation on your content. The user can also select the thickness of the pencil from the toolbar

2. Highlight mode(with pencil)

When the user wants to highlight some image/text we can use this highlight mode with a pencil, you can also select the thickness of the highlighter

C. Highlighter

Why use the pencil tool when we have a dedicated annotation tool to highlight content?

You’ll find the highlighter just below the pencil tool. Once you’ve selected the tool, you can click and drag on any text on the screen to highlight the section. Release your cursor and a comment box will appear. Simply hit submit and your desired text will be highlighted.

Note: The highlighter tool can only be used on text.

Sometimes, you need to point your feedback to a specific element. And for this, we have an arrow tool in zipBoard. So, the collaborators never miss your targeted feedback.

To use the tool, click on the tool with an arrow. You can then drag your cursor to the object where you want the arrow to point. Release your cursor and a comment box will appear. Add your comment and click on the small green button on the right to save it.

E. Rectangle

This tool as its name suggests allows you to provide comments on an area of the screen. Some users call it the area tool. To use the rectangle tool, select the rectangle icon on the review bar. On the screen, click where you want the rectangle to start, hold and drag your cursor to draw the rectangle and then release it once you’ve enclosed the area. A comment box will appear where you can add your feedback. Add your comment and click on the green button to save it.

F. Easer

The eraser is used to remove/delete annotations without removing the comment associated with them. To use the eraser tool, select the eraser icon below the rectangle and click on the annotation you want to remove.

If you want to remove the comment associated with the annotation, simply click the trash icon at the top right of each individual comment. This will remove the annotation as well as the comment.Note: If you have selected any annotation but haven’t added the comment yet, then pressing the “ESC” of your PC will remove it.

G. Screenshot

There are times when you just have to take a screenshot. This screenshot tool can be used to capture the screen you are on. There are two ways you can capture the screen.

I.  Visible area screenshot

If you want to capture the area which is visible on your screen then click this option. It will take the shot, process it and will open a new section called screens where you will see the screenshot taken. You can then use the different annotations available to start your review right on the screenshot.

II. Full page screenshot

We’ve all been there. We’ve wanted to grab a fullscreen screenshot without having the proper means to do so. Now if you want to capture the full page then click this option. It will take the shot, process it and will save it in a new section where you will see the full page screenshot taken. There you can use the different annotations available to start your review right on the full screenshot.

III. Record video

Chances are you want to explain specific issues to a client or a team member, showing them exactly how a site performs or how you want it to perform. For this, we have a recording tool which you can use to record the screen and yourself with audio, for better context.

To record the video, just select the record video option. This will open up an interface where you will find multiple recording features. Make sure the “Recordvideo” option is selected. Set the settings i.e. record microphone or audio as per your choice. Then click on “Recordvideo”.

This will open up a UI from Chrome where you will be required to select the screen for recording. Select from the screen or window option and click “Share”. It will start the recording. Once the recording is done, then click on “Stopsharing”. It will process the video and will open it up in a new window where you will be able to play your recorded video and add annotations.

H. Slideshow

Now that we’ve provided a lot of contextual feedback and annotations, it’s time to look at it from a high-level view. The slideshow function allows you to see all of your screenshots, screen recordings and comments. You can also add annotations and comments in the slideshow view!

I. Hide/Un-hide pop-ups

Content with multiple collaborators is bound to have numerous valuable feedback. However, they can often impede your view of the content itself. If the comments are blocking the content on your file then you can easily hide them. Just click on “Hide” to close all the popups. Don’t worry! Your feedbacks are still there. And is just a click away from you. So, if you want all the comments back then click “Unhide” which will make them visible once again.

J. Device mode

At zipBoard, we recognize the importance of responsive sites. This is why you can review your content in the device type you want to review it. In this mode, you will be able to review your content in the multiple available device modes.

To use it click on the “Device mode” option. You will see a dropdown on the top of your screen. Click on the drop-down and it will show you a list of all available devices that you can select to review your content.

Simply selecting the device will emulate the screen in the same size as the device chosen. You can then take a screenshot/video and change the option from “Browse” to “Review”. On browse, you can scroll through the screen. Once you take the screenshot/video in the review mode, you will be able to add multiple annotations to review your file. If you want to exit from device mode, then simply click on “Cross” showing right next to the dropdown.

Comment count & Reply count

The other thing that you’ll see is that there is a comment counter on the right side of the screen. Displaying the total count of the comments added.

These comments will however not reflect the replies to individual comments. Meaning, that if you reply to any comment, the comment counter will not change. You will instead notice a different counter for individual comments, keeping tabs on the number of replies to it. The default value is set to 1, which is the comment.

We can set the content status from here as

1. Open

2. Approved

3. Rejected

4. In-progress

J.Toggle disable comments

we can add only annotation without comment using this option

If you have any doubts or questions, feel free to reach out to us at [email protected].