First annotation

This guide explains how to place your first annotation on a web page with EchoPastel.

What is an annotation?

An annotation (or "pin") is a comment you place directly on an element of your web page. Each annotation:

• Is attached to a specific element on the page
• Contains your comment or feedback
• Can include mentions of collaborators
• Automatically generates a screenshot
• Can receive replies from your team

Activate annotation mode

To start annotating, you need to activate annotation mode:

1. Open your Echo from your dashboard
2. Once the page is loaded, look for the "Annotation Mode" button or pin icon
3. Click to activate annotation mode

Tip: The cursor changes to indicate that you're in annotation mode. You'll see a special cursor with the "Annotation Mode" indication.

Place an annotation

Once annotation mode is activated:

Step 1: Click on an element

1. Browse the page with your mouse
2. Click on the element you want to annotate
   • This can be a button, image, text, form, etc.
   • You can even annotate elements in carousels or sliders!

Step 2: Write your comment

Once you've clicked on an element:

1. An annotation popover appears next to the element
2. Type your comment in the text area
   • Be precise and descriptive
   • Explain what you want to improve or report

Step 3: Add mentions (optional)

You can mention collaborators in your annotation:

1. Type @ followed by the person's name
2. Select the person from the dropdown list
3. The mentioned person will receive a notification

Step 4: Send the annotation

1. Click on "Send" or press Enter
2. The annotation is created and appears on the page
3. A screenshot is automatically generated

Types of annotations

Simple annotation

A basic annotation with just text. Perfect for:

• Reporting a problem
• Suggesting an improvement
• Asking a question

Annotation with mention

An annotation that mentions a collaborator. Useful for:

• Assigning a task to someone
• Asking for an expert's opinion
• Notifying a specific person

Annotation with status

You can set a status for your annotations:

• Not started: New annotation
• In progress: Work in progress
• Completed: Issue resolved

Reply to annotations

Annotations can receive replies:

1. Click on an existing annotation
2. The popover opens with all replies
3. Type your reply in the provided field
4. Click on "Send"

Replies allow you to:

• Ask clarification questions
• Provide additional information
• Confirm that a problem is resolved

Advanced features

Annotations on dynamic content

EchoPastel can annotate elements in:

• Carousels: Annotations remain attached even when the carousel changes
• Sliders: Annotations follow moving elements
• Scrollable content: Annotations remain visible when scrolling

Fingerprint system

Each annotation uses a multi-strategy fingerprint system that ensures:

• The annotation remains attached to the right element even if the page changes
• Annotations work on dynamic content
• If an element disappears, the annotation is marked as "orphaned" but remains accessible with its screenshot

Orphaned annotations

If an annotated element no longer exists on the page:

• The annotation is marked as "orphaned"
• It remains accessible with its screenshot
• You can still see and reply to the annotation

Best practices

Be precise

• Click directly on the element in question
• Write clear and actionable comments
• Use mentions to involve the right people

Organize your annotations

• Use statuses to track progress
• Reply to annotations to maintain the conversation
• Archive resolved annotations

Collaborate effectively

• Mention the people concerned
• Reply quickly to questions
• Use annotations to document decisions

Next steps

Now that you know how to place annotations:

1. Discover the annotation system - Learn more about advanced features
2. Learn to collaborate - Share your annotations with your team
3. Explore features - Understand how the fingerprint system works

Frequently asked questions

Can I modify an annotation after creating it?

Yes! Click on the annotation and use the edit button to modify the text.

Can I delete an annotation?

Yes, you can delete your own annotations. Deleted annotations cannot be recovered.

Do annotations work on mobile?

Absolutely! EchoPastel supports annotations on desktop and mobile. You can test your interfaces on all types of devices.