Using the Canvas

The Canvas is where the magic happens. This section explains how to leverage the Canvas for feedback, pin and comment on web pages and efficiently organize your comments.

By Fatma

• 10 articles

Introduction to the Canvas

Welcome to the heart of creative collaboration - the Canvas! In this guide, we'll introduce you to the Canvas, its features, and how it revolutionizes the way you collaborate with your team. What is the Canvas? The Canvas on Commented is a virtual workspace that allows you to overlay comments directly onto your live website. Imagine it as a digital canvas where you can pinpoint ideas, suggestions, and improvements with precision. It's not just about words; you can visually illustrate your thoughts on specific sections of a web page, making comments clearer, and more actionable. Key Features of the Canvas 1. Commenting: Click anywhere on a web page to add comments. Whether it's a design element, functionality issue, or a creative suggestion, you can leave comments exactly where they matter. 2. Interactive Pins: Each comment becomes a pin on the Canvas. Clicking on a pin reveals the associated feedback, creating an interactive experience for everyone involved. 3. Collaborative Workspace: Invite team members to the Canvas. Everyone can contribute with a comment, fostering a seamless collaboration in real-time. 4. Contextual Understanding: By attaching comments directly to web elements, you eliminate confusion about what's being discussed. Contextual understanding leads to quicker, and more accurate resolutions. 5. Visual Annotations: Use tools to create visual annotations. Add texts, emojis, drawings, or images to emphasize your points visually. 6. Workflow Insights: Keep track of comment statuses – resolved or unresolved. Easily see which comment has been addressed and which needs further attention. Getting Started with the Canvas 1. Access the Canvas: Log in to your Commented account and click on the desired project. Navigate to the related website through the link. 2. Add Comments: When accessing the related website, click on the "Add comment" button on the widget. Then, click on any area of your live website to add a comment. A pin will appear with your comment attached. 3. Interactive Experience: Click on pins to read and respond to comments. Collaborators can engage in discussions directly on the Canvas too. 4. Annotations: Utilize the annotation tools to visually enhance your feedback. Draw attention to specific details or propose design changes with ease. 5. Resolve and Manage: As discussions progress, you can mark comments as resolved or unresolved, maintaining clarity in ongoing conversations. Benefits of the Canvas - Precise Comment: Directly pinpoint issues or suggestions on the live website, leaving no room for ambiguity. - Real-Time Collaboration: Collaborators can work together seamlessly, discussing comments, and making improvements instantly. - Efficient Communication: Visual annotations and comments make communication more efficient, reducing back-and-forth exchanges. - Contextual Understanding: Attach comment to specific elements, ensuring everyone understands the context of the discussion.

Last updated on Nov 03, 2025

Collaborating with Team Members

Commented is designed to facilitate seamless collaboration among team members, making it easier to exchange comments, share insights, and work together towards project success. This guide will introduce you to the key features and practices for effective collaboration within your workspace. Understanding Collaboration on Commented Collaboration is at the heart of Commented, enabling team members to: - Add Comments: Add insightful comments directly on web pages to provide feedback, share ideas, and chat. - Reply to Comments: Engage in threaded conversations by replying to comments, allowing for focused discussions. - Mention Team Members: Tag specific team members using the "@" symbol to bring their attention to a comment or discussion. - Share Annotations: Share annotated web pages with team members to highlight specific areas or elements. - Utilize AI Enhancements: Leverage AI-powered suggestions to enhance the quality and impact of your comments. Best Practices for Effective Collaboration 1. Clear and Constructive Comments: When adding comments, ensure they are clear, specific, and constructive. Clearly explain your thoughts, suggestions, or concerns to facilitate better understanding. 2. Engage in Discussions: Encourage discussions by replying to comments. Engaging in conversations helps clarify points, address queries, and collaboratively work towards solutions. 3. Tag Relevant Team Members: Use the mention feature ("@") to notify team members about comments that require their input or expertise. This ensures that relevant parties are always in the loop. 4. Share Annotations: If you've annotated a web page, consider sharing it with team members. Annotations can visually highlight specific elements, making it easier for others to understand your comment. 5. Leverage AI Enhancements: Experiment with AI-enhanced suggestions for improving the impact of your comments. These suggestions can help you communicate more effectively and comprehensively. 6. Regular Check-Ins: Schedule regular check-ins with your team to review comments, address any pending discussions, and ensure that any input is being incorporated into the project. Collaboration Across Workspaces and Projects - Workspaces: Commented enables collaboration across different workspaces, making it ideal for managing multiple projects or client interactions. - Projects: Within each workspace, projects allow you to focus on specific initiatives. Collaborate with the right team members in the appropriate project to streamline communication.

Last updated on Nov 03, 2025

Adding Pins and Comments

Commented empowers you to provide accurate and focused comments by adding pins directly to your live website. This guide will walk you through the simple process of adding pins and comments, ensuring that your input is clear, actionable, and impactful. Adding Pins and Comments: A Step-by-Step Guide Follow these steps to add pins and comments: Step 1: Access Your Project Web Page - Option 1: Log in to your Commented account and either create a new project by clicking on the CTA or navigate to an existing project. Click on the domain link and access the related website. - Option 2: Navigate to the web page where you want to create a project. Please note that your first comment on a web page will create a new project. Step 2: Add a Pin - Click on the "Add comment" button. You will see that your cursor has become your pin. - Hover your cursor over the area you want to comment on. Click on the spot you want to add a pin. This pin represents the specific point on the website where you want to leave a comment. Step 3: Leave a Comment - Once the pin is added, a comment box will appear. Type your feedback, suggestions, or questions in the comment box. You can add an image to your pin by clicking on the "Image" icon. Step 4: Submit Your Comment - After composing your comment, click on the "Send" icon. Your comment will now be associated with the pin you placed on the web page. Step 5: Interactive Discussion - Collaborators and team members can click on the pin to read your comment and respond. This initiates an interactive discussion right on the Canvas. Best Practices for Adding Pins and Comments - Be Precise: Pinpoint the exact area you’re referring to on the website. This avoids confusion and ensures that the comment is relevant. - Visual Annotations: Use the annotation tools to draw attention to specific elements. Highlight, underline, or draw shapes to emphasize your comment visually. - Contextual Details: Include relevant context in your comment. Mention why you're suggesting a change, reporting a bug, or offering an improvement. - Engage in Discussion: Stay engaged in the conversation by responding to comments and collaborating with team members or clients. This ensures that the comment is fully understood and implemented effectively. Benefits of Adding Pins and Comments - Clarity: Adding pins directly to the website provides visual context, eliminating any ambiguity. - Efficiency: Pinpointed comment saves time by directly addressing specific issues or elements. - Collaboration: Collaborators can read comments and respond, fostering real-time teamwork and discussion. - Precision: The ability to comment exactly where needed ensures that your input is acted upon accurately.

Last updated on Nov 03, 2025

Viewing Comments on the Canvas

The Commented Canvas provides a dynamic space where you can interact with your live website and engage in productive discussions. Viewing comments on the Canvas allows you to gain valuable insights, address comments, and collaborate seamlessly with your team. This guide will lead you through the process of accessing and navigating comments on the Canvas, empowering you to make informed decisions and drive your projects forward. Viewing Comments on the Canvas: A Step-by-Step Guide Follow these steps to view comments on the canvas: Step 1: Access Your Project Web Page - Option 1: Log in to your Commented account and navigate to the desired project. Click on the domain link and access the related website. - Option 2: Navigate to the web page where you want to reply a pin. Choose the relevant project from the widget if you have more than one project for the same domain. Step 2: Identify Comment Pins There are two ways to view the comments on your Canvas. First is manually, via exploring the website and locating the pins as you hover. The second is through the button on the widget. - Option 1: View Comments Manually Explore your live website within the Canvas. As you navigate, you'll notice pins placed on specific sections of the site. Each pin represents a comment left by you or your team members. Click on a pin to reveal the comment associated with that section. - Option 2: View Comments via Wİdget You can also view comments with the help of the "Show/hide comments list" button located on the widget. Upon clicking this button, a window will appear on the right side of your screen. This window shows the list of pins. As you click on the comment you want to view, the site automatically navigates you to the spot where that pin is exactly located. Step 3: Review Comment Details - Upon clicking a pin, a comment box will appear, displaying the comment's content, the user who left it, and the date it was added. Take a moment to understand the comment provided. Step 4: Navigate Between Comments - To explore other comments, click on different pins. Each pin corresponds to a unique comment thread. Benefits of Viewing Comments on the Canvas - Visual Context: Comments are tied to specific sections of the live website, providing visual context for the comment. - Informed Decisions: By understanding comments within their web context, you can make informed decisions about necessary improvements or changes. - Efficient Collaboration: Navigating comments directly on the Canvas streamlines collaboration and discussion among team members. - Focused Comments: Accessing comments on specific elements allows you to address issues with precision, boosting the effectiveness of your responses. Best Practices for Navigating Comments - Systematic Exploration: Take time to explore the entire live website and discover all the comments. This ensures a comprehensive understanding. - Address Priority Comments: Focus on addressing high-priority comments first to address critical issues promptly. - Engage with Replies: Engage in discussions by replying to comments, facilitating collaboration, and refining solutions.

Last updated on Nov 03, 2025

Replying to Comments

Engaging in meaningful conversations with your team members is crucial when collaborating on projects. Commented enables you to reply to comments directly on your live website, fostering efficient communication and driving impactful changes. This guide will walk you through the process of replying to comments, ensuring that your discussions are clear, productive, and collaborative. Replying to Comments: A Step-by-Step Guide Follow these steps to reply to comments: Step 1: Access Your Project Web Page - Option 1: Log in to your Commented account and navigate to the desired project. Click on the domain link and access the related website. - Option 2: Navigate to the web page where you want to reply a pin. Choose the relevant project from the widget if you have more than one project for the same domain. Step 2: View Comments - Explore the live website within the Canvas. Locate the pin associated with the comment you want to reply to. If you are browsing the pins on your dashboard, you can also use the filters. If you are browsing the pins on your canvas, you can also find the related comment through the "Show/hide comments list". Click on the pin to reveal the comment thread. Step 3: Reply to a Comment - Click on the "Reply" section located below the comment. Step 4: Compose Your Reply - Type your response, addressing the points raised in the original comment. Be concise, clear, and respectful in your reply. Step 5: Submit Your Reply - After composing your reply, click "Send". Your response will now be added to the comment thread. Step 6: Engage in Discussion - Team members can continue to reply to the thread, creating an interactive dialogue around the comment. This discussion is vital for clarification, brainstorming, and decision-making. Best Practices for Replying to Comments - Stay Relevant: Address the specific points raised in the original comment to ensure your response is on-topic. - Be Constructive: Maintain a positive and collaborative tone in your replies. Focus on solutions and improvements. - Provide Context: If necessary, provide additional context to elaborate on your response. This helps avoid misunderstandings and confusion. - Acknowledge Input: Even if you disagree, acknowledge the comment and explain your perspective. This promotes open discussion. Benefits of Replying to Comments - Clarity: Replies offer clarification and context, ensuring that everyone understands the feedback and its implications. - Collaboration: Engaging in discussions leads to better decisions, creative solutions, and enhanced teamwork. - Transparency: Transparent conversations help team members understand the reasoning behind decisions and changes. - Efficiency: Real-time discussions streamline the improvement process, saving time and accelerating project progress.

Last updated on Nov 03, 2025

Changing Comment Statuses

Changing the statuses of comments in Commented allows you to effectively track and manage the progress of discussions, address issues, and maintain a streamlined workflow. Whether you want to indicate that a comment has been resolved or unresolved, this guide will lead you through the process of changing the statuses of comments, ensuring that you maintain clear communication and collaboration within your projects. Changing Comment Statuses: A Step-by-Step Guide Managing comment statuses is essential for effective collaboration and project coordination in Commented. Whether you're working directly on the canvas or navigating through the dashboard, here's how you can seamlessly change comment statuses between "Unresolved" and "Resolved." From Canvas Step 1: Access Your Project - Navigate to the desired web page. You can either enter the website URL, or use your dashboard to navigate to the related web page (by clicking on the website URL under your project title). Step 2: Locate the Comment - Find the comment you want to update the status for. This could be a comment you left or one from another team member. Step 3: Change the Status - When you click on it, the pin details container will appear. - Within the comment details, you will find a "Resolve" or "Resolved" option to change the status of the comment. Typically, this is represented by a checkmark icon. Click on it to resolve or unresolve the pin. If the comment has been addressed and resolved, the icon becomes green and the status automatically changes to "Resolved". You’ll notice that the resolved pins are no longer visible on your canvas. To see them please click on the ‘Show/hide comments list’ button on your widget, and use the checkbox at the top of the comments list container to view both resolved and unresolved comments. Upon clicking on any of the comments in this list, you’ll be directed to that section of the web page. From Dashboard Step 1: Access Your Project - Log in to your Commented account and navigate to the desired workspace and project. Step 2: Locate the Comment - Find the comment you want to update the status for. This could be a comment you left or one from another team member. You can click on the "Resolve" or "Resolved" buttons at the right side of each pin card to change the statuses of each comment. Step 3: Change the Status - Click on the related comment to view its’ details. - Within the comment details, you will find a "Resolve" or "Set unresolved" option at the top right side of the drawer. Click on it to change the status of the comment. Benefits of Changing Comment Statuses - Progress Tracking: Changing the statuses of comments allows you to track the progress of discussions and actions, ensuring that tasks are completed. - Clear Communication: Team members can easily understand the status of a comment, eliminating confusion, and streamlining collaboration. - Project Management: Managing comment statuses contributes to effective project management by indicating tasks that need attention or have been successfully addressed. Best Practices for Changing Comment Statuses - Timely Updates: Regularly review and update comment statuses to reflect the current state of discussions. - Consistency: Establish a consistent approach to using comment statuses across your team to maintain clarity and understanding. - Communication: If a comment's status changes, communicate this update to relevant team members to ensure everyone is on the same page. If you encounter difficulties while changing comment statuses or notice unexpected behavior, consult our support resources or reach out to our support team for assistance. Effortlessly switch between "Unresolved" and "Resolved" comment statuses in Commented, keeping your projects organized and ensuring that collaboration remains efficient.

Last updated on Nov 03, 2025

Applying Filters and Sorting Results

Commented empowers you to manage and organize comments and pins with precision by utilizing our powerful filtering and sorting features. Whether you're aiming to categorize comments, prioritize tasks, or analyze discussions, these tools provide the flexibility you need. This guide will walk you through the process of applying filters and sorting results on Commented for seamless project management. Applying Filters and Sorting on Commented: Step by Step Follow these steps to apply filters and sort pins on Commented: Step 1: Accessing the Comments - Log in to your Commented account. - Navigate to the relevant project from your dashboard. Upon accessing the project, you’ll see the list of comments related to that project. Step 2: Viewing Filtered Results - Access the filters by clicking on the "Filters" button below your project name. - Upon clicking, a drawer will open on the left side of your screen. You’ll see that you can filter the comments by choosing people who created it, team members who were involved in a particular thread, or specific pages that were commented on. Also, you can hide resolved, unresolved, or read comments. - Select the filter(s) you want to apply. - Click on the "Filter" button at the bottom of the drawer. You can also clear all filters by clicking on the "Clear All" button right next to it. - Once you click on the "Filter" button, the drawer will be closed and you'll see a refined list of items based on your chosen filters. You can also use the "Show unresolved" and "Show resolved" buttons to easily filter the results. To filter the comments regarding the stamps that were used: - Locate the "Stamps" button and click on it to view the stamp options. - Choose the stamp(s) that you want to filter the results by. You can choose more than one. - When you’re done, click on the "Stamps" button again to close the drop-down. Now, you'll see a refined list of items based on your chosen filters. If there are any active filters, you’ll see the number of active filters on the upper right corner of the related button. Step 3: Sorting Your Results - Look for the "Sort by" options located on the upper right side of the comments. - Click on it to view the sorting options and select the criteria you want to sort by. This could include the date or status of the comment. Once the sorting options are applied, Commented will display the comments or pins that match your selected criteria. Advanced Tips for Filters and Sorting - Combining Filters: You can often apply multiple filters simultaneously to narrow down results even further. - Dynamic Interaction: Filters and sorting options may dynamically update as you make selections, providing real-time communication. Benefits of Using Filters and Sorting - Enhanced Organization: Keep your workspace organized by viewing only the comments or pins that are currently relevant. - Customized Views: Tailor your view to match your current needs, whether it's reviewing recent comments, unresolved comments, or specific project discussions. - Efficient Decision-Making: Quickly prioritize tasks and discussions by focusing on high-priority comments or pins. - Data Analysis: Grouping comments and pins with similar attributes together can aid in analyzing trends and patterns.

Last updated on Nov 03, 2025

Sharing Pins and Comments

Commented empowers you to collaborate seamlessly by allowing you to share pins and comments with team members, clients, or stakeholders. Sharing feedback, ideas, and discussions has never been easier. This guide will walk you through the process of sharing pins and comments on Commented, ensuring efficient communication within your projects. Sharing Pins and Comments on Commented There are two options for sharing pins and comments on Commented. Feel free to choose the one you prefer. Option 1 - Log in to your Commented account. - Access the relevant project from your dashboard. - Click on the comment you want to share. A drawer will open and you’ll access the details of that particular comment. - Locate the "Share" icon on the left side of the pin detail drawer. - A window will pop up on your screen. You can either send the link via email or copy and share the link through your preferred medium. To copy the link, you can click on the icon right next to the link. This icon will change (into a check icon) when the link is copied. Option 2 - Access the relevant project web page. You can use the domain link in your dashboard to navigate. - Locate the comment or pin you wish to share and click on it to open its details. - Find the "Share" icon and click on it. - A modal will pop up on your screen. Choose the option you prefer, you can either copy the pin link or send the link directly via email. If you want to share the link via email, click on the related button. Enter the email address(es) in the designated area and hit the "Share" button. If you want to copy the pin link ,click on the related button. You’ll be notified when the link is copied. Once the link is generated, you can distribute it through various communication channels such as emails, messaging apps, or project management tools. Recipients can simply click on the link to access the shared comment or pin directly. Advanced Tips for Sharing Pins and Comments - Control Access: Ensure that you're sharing the link with the appropriate individuals who should have access to the content. - Expiration: Some platforms allow you to set an expiration date for shared links to control access over time. Benefits of Sharing Pins and Comments - Clear Communication: Share specific comments or pins to provide context and clarity, reducing misunderstandings. - Remote Collaboration: Collaborate seamlessly with team members, clients, or stakeholders, regardless of their location. - Input Collection: Easily gather input from multiple individuals without the need for them to log in to Commented. - Efficient Documentation: Create a shareable record of discussions that can be revisited whenever needed. - Contextual Discussions: Share relevant pins and comments within the context of the project, making it easier for participants to understand the conversation.

Last updated on Nov 03, 2025

Annotating the Web Page

Commented's Annotation feature empowers users to provide detailed insights, foster collaborative discussions, and enrich communication directly on the canvas. Annotations, initiated by dropping a pin and clicking on the 'Annotate' button on the pin container, serve as visual cues, ensuring precise alignment. This comprehensive guide will walk you through the various aspects of Commented's Annotation feature. Benefits of Using Annotations in Commented - Visual Communication: Communicate thoughts visually by placing annotations directly on the canvas. - Contextual Collaboration: Provide targeted feedback on specific elements, ensuring clarity in collaborative efforts. - Efficient Collaboration: Streamline communication by adding annotations to highlight key areas. - Interactive Discussions: Foster interactive discussions by using annotations as starting points for collaborative conversations. Annotating the Web Page: Step-by-Step Guide Follow these steps to annotate the web page: Step 1: Accessing the Annotation Feature - Open the Commented canvas where you want to add annotations. - Drop a pin on the desired area of the canvas. - Click on the ‘Annotate’ button that appears in the pin container (on the screenshot of the pin). - Once you’ve clicked on the button, the pin and its’ container disappears and the annotation toolbar appears. From this point on, the portion of the web page you are viewing becomes a screenshot for the annotation. Step 2: Adding Annotations - Explore the annotation toolbar. You can add texts, freehand drawings, emojis, and images: - Move-Resize: Purpose: This tool enables you to move or resize annotations that you've already placed on the web page. How to Use: Click on the ‘Move-Resize’ icon. Select an annotation (text, emoji or image), and you'll see handles around it. Click and drag the handles to resize, or click and drag the annotation itself to move it. - Add Text: Purpose: The add text tool allows you to add texts directly onto the web page for reference or clarification. How to Use: Click on the ‘Add Text’ icon. A text field will appear on your canvas. Double click on the field to edit the text. You can move the text and use the handles to resize and rotate it. - Pencil: Purpose: The pencil tool lets you freehand draw on the web page, making it useful for highlighting or sketching ideas. How to Use: Click on the ‘Pencil’ icon, then draw directly on the page by clicking and dragging your cursor. You can customize the color and tailor your annotations for better clarity. - Add Emoji: Purpose: Emojis can add an expressive touch to your annotations, conveying emotions or reactions. How to Use: Click on the ‘Emoji’ icon, then select an emoji from the list to place it on the page. You can move the emoji and use the handles to resize and rotate it. - Add Image: Purpose: The add image tool allows you to insert images directly onto the web page for reference or clarification. How to Use: Click on the ‘Add Image’ icon. Select the image you want to add. You can move, resize and rotate the image. Step 3: Adding Comments - Once you’ve annotated, you should type a comment in the provided field (to the right of the annotation toolbar) in order to submit your annotation. You can enhance your annotations by attaching comments for additional context. You can add an image to your comment as well! - Once you’re done with typing your comment, submit it by clicking on the ‘Send’ button. Tips for Effective Annotations - Be Clear: Use concise and clear language in your text annotations to convey your message effectively. - Use Visuals Sparingly: While visual annotations can be helpful, avoid overusing them, as too many visuals can clutter the page. If you have any questions or encounter challenges while using the Annotation feature, our support team is ready to assist you. Happy collaborating!

Last updated on Nov 03, 2025

Using Commented's Stamps Feature

Commented's Stamps feature introduces a new dimension to collaboration, allowing users to infuse emotions and context into their projects effortlessly. These expressive stamps offer a fun and intuitive way to convey sentiments, providing a richer layer to your collaborative experience. Benefits of Using Stamps in Commented - Effortless Expression: Easily convey your sentiments and reactions using a variety of expressive stamps. - Enhanced Communication: Stamps serve as visual cues, adding a layer of context to your comments. - Visual Project Management: Quickly identify key sentiments or reactions by viewing smaller versions of stamps on your dashboard. - Streamlined Filtering: Efficiently navigate your projects by filtering pins based on specific stamp types. - Engaging Collaboration: Encourage team members to express themselves creatively, fostering a lively collaborative environment. Adding Stamps to Your Canvas: A Step-by-Step Guide Step 1: Accessing Stamps - Navigate to the Commented canvas where you'd like to add expressive stamps. - Locate the stamp icon on the widget. Step 2: Choosing Stamps - Click on the stamp icon to reveal a selection of expressive icons. - Explore the variety of stamps available, each designed to convey a unique sentiment. Step 3: Placing Stamps - Once you've chosen the stamp that fits your message or emotion, click on it. Now, you’ll see that your cursor has become that particular stamp. - Position the stamp as you would with regular pins to mark specific areas or elements. Step 4: Adding Comments - Enhance the meaning of your stamps by accompanying them with comments. - Click on the stamped area, and a comment box will appear. Type in your insights, feedback, or any relevant information. Step 5: Dashboard Integration - Head to your dashboard to see a summarized view of your stamped comments. - Smaller versions of the stamps are attached to the corresponding pin cards for quick reference. Step 6: Filtering by Stamps - Streamline your project navigation by filtering pins based on stamp types. - Utilize this feature to focus on specific sentiments conveyed by stamps, making project management more efficient. Commented's Stamps feature is designed to enhance your collaborative experience by infusing emotions and context into your projects. Follow these simple steps to add expressive stamps, share feedback, and engage in discussions seamlessly. If you have any questions or encounter issues during this process, our support team is here to help. Happy Stamping!

Last updated on Nov 03, 2025