Pinning Feedback on Pages

How to Pin Feedback

Pinning feedback is the core action in Sniffer that allows you to attach bug reports and comments to specific elements on a webpage. This visual approach ensures that developers understand exactly where an issue occurs.

Step 1: Navigate to the page on your website where you want to report feedback. Ensure the Sniffer sidebar is visible by clicking the sidebar tab.
Step 2: Click the “New Bug,” “Report Issue,” or pin icon button in the sidebar to enter feedback mode. Your cursor changes to a crosshair or pin indicator, signaling that you are ready to select an element.
Step 3: Move your cursor over the page. As you hover, Sniffer highlights elements to show what will be selected when you click. This highlighting helps you target the precise element you want to report on.
Step 4: Click on the element where the issue exists. Sniffer captures a screenshot of the current viewport and places a pin marker at the exact location you clicked.
Step 5: The feedback form appears, either in the sidebar or as a popup overlay. The screenshot is attached automatically, and you can now add details about the issue.
Step 6: Complete the feedback form with a title, description, and any other relevant information. Set the priority, severity, and assignee as needed.
Step 7: Click “Submit,” “Create,” or “Save” to finalize the feedback. The pin is saved to the project, and the task appears on the task board.
Canceling Feedback Mode: If you enter feedback mode but decide not to place a pin, press the Escape key or click the cancel button to exit without creating a task.

Pin Placement Accuracy

Sniffer uses intelligent element detection to ensure pins are placed accurately and remain relevant even as page content changes.

Element Detection: When you click to place a pin, Sniffer identifies the specific HTML element you selected. It records information about the element, including its tag type, CSS selectors, position, and surrounding context. This allows Sniffer to relocate the pin even if the page layout shifts slightly.
Selector-Based Positioning: Sniffer generates a CSS selector path for the pinned element. When the page is revisited, Sniffer uses this selector to find the element and display the pin in the correct location. If the element has a unique ID or class, the pin placement is highly reliable.
Coordinate Fallback: In cases where element selectors cannot uniquely identify the target, Sniffer falls back to viewport coordinates. The pin appears at the recorded x and y position relative to the page, which works well for static pages but may be less accurate on dynamic or responsive layouts.
Dynamic Content Handling: For pages with dynamic content (such as carousels, accordions, or content loaded via JavaScript), Sniffer attempts to capture the state of the page at the time of pinning. The screenshot provides a permanent record of what the reporter saw, even if the live page has changed.
Accuracy Tips: For best results, pin feedback to stable elements with unique identifiers. Avoid pinning to elements that are likely to move, be removed, or change significantly between page loads. If you notice pins appearing in incorrect locations, consider updating the feedback with additional context in the description.

Moving Pins

Sometimes you may need to adjust the location of a pin after it has been placed. Sniffer provides options for relocating pins to improve accuracy.

Editing Pin Location: Open the task associated with the pin you want to move. Look for an “Edit Pin,” “Move Pin,” or “Reposition” option in the task details or context menu.
Re-Pinning: Some versions of Sniffer allow you to re-pin feedback by entering edit mode and clicking on a new location. The pin moves to the new position, and a new screenshot may be captured to reflect the updated location.
Updating the Screenshot: If you move a pin, consider updating the screenshot as well to ensure the visual record matches the new pin location. Look for a “Retake Screenshot” or “Update Screenshot” option.
Limitations: Depending on your role and project settings, you may only be able to move pins on tasks you created. Administrators and managers typically have permission to move any pin within the project.
When to Move Pins: Move pins when the original placement was inaccurate, when the page layout has changed and the pin no longer points to the correct element, or when consolidating feedback from multiple similar reports.

Deleting Pins

Removing pins helps keep your project organized by eliminating outdated, duplicate, or irrelevant feedback markers.

Deleting a Pin with Its Task: The most common way to remove a pin is to delete the associated task. When a task is deleted, its pin is also removed from the page. Open the task, click the delete option (often found in a menu or as a trash icon), and confirm the deletion.
Archiving vs. Deleting: Before deleting, consider whether archiving the task is more appropriate. Archived tasks are hidden from the active task board but retain their data and history. Deleting is permanent and cannot be undone.
Bulk Deletion: If you need to remove multiple pins, you may be able to select multiple tasks from the task board and delete them in bulk. This is useful for cleaning up after a testing phase or removing test data.
Permission Requirements: Only users with appropriate permissions (typically Administrators and Managers) can delete tasks and their associated pins. Members and Reporters may need to request deletion from a project administrator.
Orphaned Pins: In rare cases, a pin may become orphaned if its associated task is corrupted or improperly deleted. If you encounter a pin on the page that does not link to any task, contact Sniffer support for assistance in resolving the issue.

Pin Visibility

Controlling pin visibility helps you focus on relevant feedback and keeps the webpage uncluttered during different stages of your workflow.

Default Visibility: By default, all pins for open tasks are visible when you view a page with the Sniffer sidebar active. Each pin displays as a colored marker at its designated location.
Filtering Pins by Status: You can filter which pins are displayed based on task status. For example, show only pins for tasks in “To Do” status, or hide pins for tasks that are already marked as “Done.” This helps you focus on active issues.
Filtering Pins by Assignee: Display only pins for tasks assigned to you or to a specific team member. This is useful for developers who want to see only the bugs they need to work on.
Filtering Pins by Priority: Show only high-priority or critical pins to focus on the most important issues first. Lower-priority pins can be hidden until you are ready to address them.
Hiding All Pins: If you need to view the website without any pin overlays (for example, when taking clean screenshots or presenting to stakeholders), you can hide all pins using the sidebar settings or a keyboard shortcut.
Pin Density Management: On pages with many reported issues, pins may overlap or clutter the view. Sniffer may provide options to cluster nearby pins, show pin counts instead of individual markers, or zoom out for an overview. Click on a cluster to expand and see individual pins.
Pin Visibility for Guests: Guest users may have different pin visibility settings. Depending on your configuration, guests may see all pins, only their own pins, or no pins at all. Configure guest pin visibility in the project settings.
Remembering Visibility Preferences: Your pin visibility settings are saved to your account. When you return to the project, your filters and visibility preferences are restored automatically.

By mastering pin placement, movement, deletion, and visibility controls, you can effectively manage visual feedback across your projects and ensure that your team always has clear, accurate information about reported issues.