Your first note

Creating your first note in Annotatr takes less than 60 seconds. This guide walks you through the entire process—from clicking an element on your page to viewing your note in the admin dashboard. By the end, you’ll understand how easy it is to capture bugs and feedback with visual context.

First-time users will see an interactive onboarding walkthrough that guides you step-by-step. You can also reference this guide anytime you need a refresher.

Step 1: Navigate to any page

Visit any page on your WordPress site while logged in. Annotatr works on:

• Homepage and blog posts
• Custom post types
• Pages built with Elementor, Divi, WPBakery, or Gutenberg
• Archive and category pages

Step 2: Click the “Add Note” button

Look for the floating button in the bottom-right corner of your screen. Click it to activate note-taking mode.

Once activated, you’ll notice:

• Your cursor changes to indicate you’re in selection mode
• Instructions appear at the top of the page

Step 3: Click drag a screenshot area you want to report

Drag your cursor to screenshot a section of the webpage. Annotatr will:

• Automatically capture a screenshot of that element
• Record the element’s CSS selector
• Save the page URL and context
• Capture browser and device information

Step 4: Fill in note details

A sheet panel will slide into view. Fill in the following:

Required Fields:

1. Title: Brief description (e.g., “Button color is wrong” or “Text is cut off”)
2. Description: Add more context about the issue or feedback

Optional Fields:

• Priority: Choose Low (default), Medium, or High
• Assignees: Select team members who should work on this
• Due Date: Set a deadline if applicable
• Status: Defaults to “Open” but can be changed

Step 5: Save your note

Click the Save Note button. Annotatr will:

• Save the note to your WordPress database
• Process and optimise the screenshot
• Send email notifications to assigned team members
• Display a success message
• Show a visual pin on the page where you created the note

Step 6: View your note in the dashboard

Navigate to Annotatr → Dashboard in your WordPress admin to see your note:

• It will appear in the “Open” column (or whatever status you selected)
• The note card shows the title, priority badge, and assignee avatars
• Click the card to view full details, add comments, or edit information

Understanding what was captured

Your note includes more than just what you typed. Annotatr automatically captured:

• Browser info: Chrome 120, Safari 17, etc.
• Operating system: MacOS, Windows etc.
• Screen resolution: 1920×1080, 2560×1440, etc.
• Zoom level: 90%, 100% etc.
• Device type: Desktop, tablet, or mobile
• Page context: URL, page title, post ID
• Timestamp: Exact date and time of creation

This technical metadata helps developers reproduce and fix issues quickly without asking follow-up questions.

Next Actions

Now that you’ve created your first note, you can:

1. Add a comment to provide additional context
2. @mention a team member to draw their attention
3. Move the note to “In Progress” when work begins
4. Create additional notes on other elements
5. Explore the dashboard filtering and search features

Congratulations!

You’ve successfully created your first Annotatr note! Creating notes becomes even faster with practice—most team members can capture an issue in under 30 seconds once familiar with the interface. Keep experimenting with different priority levels, assignees, and note types to discover what workflow works best for your team.