# HyperDocs > Generate documentation from your codebase, keep it updated as your product changes, and help users find answers through a built-in help center powered by your documentation. --- # Home Source: https://docs.droppnotes.com/getting-started/home _(no content)_ --- # Creating Your Account Source: https://docs.droppnotes.com/getting-started/creating-your-account # Creating Your Account Get started with Droppnotes in a couple of minutes. Sign up with your email address or your Google account and jump straight into a free trial — no credit card required. Your account is the home base for every review project, comment, and team member you'll work with. ## How It Works - Choose between email-and-password sign up or one-click Google sign-in. - Every new account starts on a free trial, so you can explore all core features before choosing a plan. - No payment details are needed to begin — you'll only add billing when you're ready to upgrade. - After signing up, you're guided through a short onboarding flow that helps you create your first project and leave your first comment. - Your account connects to the Chrome extension so you can capture feedback directly on any live site. ## Steps 1. Open the Droppnotes sign-up page from the website or the trial banner. 1. Choose how to sign up: enter your email and a password, or select Continue with Google. 1. If prompted, verify your email or approve the Google permission screen to confirm your identity. 1. Land on the onboarding flow, where your free trial is activated automatically. 1. Create your first project — or skip for now — and follow the getting-started guide to install the extension and drop your first pin. ## Sign-Up Options | Method | What You Provide | Best For | | --- | --- | --- | | Email & password | A valid email address and a password you choose | Anyone who prefers a standalone login | | Google sign-in | One-click approval of your Google account | Fast setup with no new password to remember | | Free trial | Nothing — no credit card | Trying every feature before you commit | ## Tips & Notes - Use the same email you'll want teammates and clients to recognize on invitations and comments. - Signing in with Google saves you from managing a separate password. - You can install the Chrome extension before or after creating your account — either order works. > **INFO:** Your free trial starts the moment your account is created. No credit card is required to explore projects, comments, and recordings. > **TIP:** Complete the short onboarding guide right after sign-up — it walks you through installing the extension and dropping your first pin in a few minutes. ## Troubleshooting - Didn't receive a verification email? Check your spam folder, then request a new link from the sign-up screen. - Google sign-in blocked? Make sure pop-ups are allowed for Droppnotes and that you're approving the correct Google account. - Says an account already exists? Try signing in instead, or use the password reset option if you've forgotten your credentials. - Not landing on onboarding after sign-up? Refresh the page or reopen Droppnotes — your account is still created and you can pick up from the dashboard. Related topics: Creating Your First Project, Installing the Chrome Extension, Managing Your Subscription. --- # Installing the Chrome Extension Source: https://docs.droppnotes.com/getting-started/installing-the-chrome-extension # Installing the Chrome Extension The Droppnotes Chrome extension is how you capture feedback directly on live websites. Once installed, you can click any spot on a page, drop a pinned note, draw an annotation, or record your screen — all without leaving the site you're reviewing. ## How It Works - Adds a Droppnotes button to your browser toolbar for quick access on any site. - Lets you pick which project a comment belongs to before you start commenting. - Captures a screenshot, the page URL, your browser, and screen size automatically with every pin. - Enables screen and audio recording so you can explain issues in context. - Syncs every comment straight to your Droppnotes dashboard and board. ## Steps 1. Open the Chrome Web Store and search for Droppnotes, or use the install link inside your Droppnotes dashboard. 1. Click Add to Chrome, then confirm by choosing Add extension in the pop-up. 1. Pin the extension to your toolbar so the Droppnotes icon is always visible. 1. Sign in with the same account (email or Google) you use for Droppnotes. 1. Open the live site you want to review, click the Droppnotes icon, and select the project you're reviewing. 1. Click Start commenting, then right-click anywhere to drop your first pin or press Record for a video. ## What the Extension Captures | Detail | What It Does | | --- | --- | | Screenshot | Captures the exact page view so the team sees what you saw. | | Page URL | Records the address of the page you commented on. | | Browser | Notes which browser you used, useful for reproducing issues. | | Screen size | Logs your viewport so desktop, tablet, and mobile issues are clear. | ## Tips & Notes - Pin the extension icon to your toolbar so it's one click away on every site. - Make sure you're on the correct project before you start commenting so notes land in the right place. - Screen recording asks for microphone and screen permissions the first time — allow both for full audio feedback. > **INFO:** You can start a free trial with no credit card. Sign up in the app first, then install the extension to connect it to your account. > **TIP:** Right-click anywhere on the page to add a comment — it's the fastest way to drop a pin exactly where the issue is. ## Troubleshooting - Icon missing? Click the puzzle-piece extensions menu in Chrome and pin Droppnotes to your toolbar. - Can't see your projects? Confirm you're signed in with the same account you use for Droppnotes. - Recording won't start? Check that Chrome has permission to record your screen and microphone in your browser settings. - Comments not appearing? Reload the site and reopen the extension, then verify you selected the right project and clicked Start commenting. Related topics: Drop a Pin on a Live Site, Record Screen Feedback, Create and Review a Web Project. --- # Dropping Your First Pin Source: https://docs.droppnotes.com/getting-started/dropping-your-first-pin # Dropping Your First Pin A pin is a note attached to the exact spot you clicked on a live website. Dropping your first pin is the fastest way to show a client or teammate precisely what you mean — and Droppnotes captures the screenshot, page URL, browser, and screen size for you automatically. ## How It Works - You browse a real, live site while the Chrome extension runs alongside it — no staging setup required. - Clicking anywhere drops a pin anchored to that exact location, so feedback never gets lost in translation. - Every pin automatically records a screenshot, the page URL, the browser, and the screen size it was left on. - You can add a plain note, draw a shape to highlight a region, or record your screen with audio for extra context. - Each pin appears instantly in your project so teammates can reply, assign, and track it to done. ## Steps 1. Install the Droppnotes Chrome extension from the Web Store and sign in to your account. 1. Open the live website you want to review in your browser, then open the extension. 1. Choose the project you want the feedback to land in and click Start commenting. 1. Click (or right-click) the exact spot on the page you want to flag. 1. Type your note, or use a shape tool to draw a rectangle, circle, or free-form mark around the area. 1. Save the pin — it appears in your project's comment list and on the board right away. ## Annotation Tools | Tool | Use it to | | --- | --- | | Pin | Mark a single exact point on the page. | | Rectangle | Box in a wider region, like a section or block. | | Circle | Draw attention to a rounded or standalone element. | | Free-form scribble | Sketch a custom shape or underline something specific. | | Screen recording | Record screen and audio to explain an issue in context. | ## Tips & Notes - Pick the right project before you start commenting so your feedback lands where teammates expect it. - Because Droppnotes captures your screen size, a pin left on mobile is tied to the mobile view — check the viewport label if a pin looks out of place. - Keep video clips attached to comments short; longer footage belongs in a dedicated video review project. > **INFO:** Inline video attached to a comment is limited to 5MB. For anything longer, create a video review project and upload the clip there. > **TIP:** You don't need to write long notes — the automatic screenshot and page URL already show reviewers exactly where you were. ## Troubleshooting - Extension won't open on a page: make sure the extension is installed and you're signed in, then reload the site and try again. - No project appears in the picker: confirm you've created a project or been granted access to one before you start commenting. - A screenshot or file won't attach: it may exceed the size limit — try a smaller image or a shorter clip. - Your pin doesn't show up: check that you saved the note and that you're viewing the same project you commented on. Related topics: Create and Review a Web Project, Record Screen Feedback, Track Comments on a Board. --- # Navigating the Dashboard Source: https://docs.droppnotes.com/projects/navigating-the-dashboard # Navigating the Dashboard The dashboard is your home base in Droppnotes, where every web and video project you own or belong to lives in one place. From here you can browse your projects, jump into a review, and reach settings, billing, and help without hunting around. ## How It Works - A sidebar keeps your main destinations — Dashboard, Help, Plans, and Settings — one click away from any screen. - The Dashboard lists all your projects, both web review projects and video review projects, so you can open the one you need. - Opening a project takes you straight into its review canvas or video player, along with the comment list and kanban board. - New notifications — such as access requests to approve — surface in-app so you can act without leaving the dashboard. - A trial or upgrade banner shows your current plan status and a quick path to Plans when you're near a limit. ## Steps 1. Sign in to Droppnotes to land on the Dashboard, which lists your projects. 1. Scan the project cards to find the web or video project you want to open. 1. Click a project to enter its review view, where you can see comments and the board. 1. Use the sidebar to switch to Help, Plans, or Settings whenever you need them. 1. Click New project from the dashboard to start a fresh web or video review. ## Sidebar Destinations | Destination | What you'll find | | --- | --- | | Dashboard | All your web and video projects, plus the New project button. | | Help / Getting started | Setup guide for installing the extension and leaving your first comment. | | Plans | Current usage, plan comparison, and upgrade or downgrade options. | | Settings | Account details, Slack connection, and access tokens for AI agents. | ## Tips & Notes - Web and video projects both appear on the dashboard — the project type is set when you create it. - Projects you were invited to appear alongside the ones you own, so everything you can access is in one list. - Keep an eye on the trial banner to know when your free trial ends or you're near a plan cap. > **INFO:** Pending access requests appear as in-app notifications on the dashboard. Owners and admins can approve or decline them right there. > **TIP:** If you're brand new, start with the Help / Getting started guide to install the Chrome extension before opening a project. ## Troubleshooting - Don't see a project? Confirm you're signed in with the correct account and that your invitation was accepted. - Can't create a new project? You may have reached your plan's project cap — check the Plans page to upgrade. - A project you expected is missing? You might need to request access from its owner, who can approve you from a notification. - Sidebar links not responding? Refresh the page, and make sure you have a stable connection. Related topics: Creating a Web Project, Reviewing a Video Project, Managing Your Subscription. --- # Creating a Web Project Source: https://docs.droppnotes.com/projects/creating-a-web-project # Creating a Web Project A web project is the home for all pinned feedback on a live website. Once set up, clients and teammates can click any spot on your site and leave notes, screenshots, and screen recordings tied to the exact place they saw the issue. ## How It Works - Each web project points to a live URL where reviewers leave feedback. - Every pin automatically captures a screenshot, the page URL, browser, and screen size. - You invite clients and teammates and choose their access level at invite time. - All feedback flows into a comment list and a kanban board so you can triage, assign, and resolve it. - Reviewers can capture feedback on desktop, tablet, or mobile screen sizes. ## Steps 1. From your Dashboard, click New project. 1. Choose the Web project type. 1. Enter a project name and the live URL of the site you want feedback on. 1. Save to create the project and open its review view. 1. Invite clients and teammates and assign each an access level. 1. Ask reviewers to open the site with the Chrome extension and drop their first pin. ## Access Levels | Access Level | What They Can Do | | --- | --- | | Admin (Full access) | Approve access requests, manage members, and view all comments. | | Teammate (All comments) | View all comments, drop pins, reply, assign, and move items on the board. | | Client (Own comments) | Drop pins and comments and see only their own feedback. | ## Tips & Notes - Enter the exact live URL you want reviewed — pins are captured against that page as it appears in the browser. - Reviewers need the Droppnotes Chrome extension installed to leave feedback on a live site. - Set clients to Own comments visibility so they only see their own notes and aren't distracted by internal discussion. > **TIP:** Give clients the Client access level so their feedback stays clean and focused, while your team keeps full visibility. > **INFO:** Your plan sets how many projects you can create. If you hit the cap, delete an old project or upgrade to add more. ## Troubleshooting - Can't create a new project? You may have reached your plan's project cap — remove an existing project or upgrade. - Reviewers can't drop pins? Confirm they've installed the Chrome extension and opened the correct site URL. - Invited someone but they can't see comments? Check their access level — clients only see their own feedback. - Feedback landing on the wrong page? Make sure reviewers are commenting on the exact URL set for the project. Related topics: Dropping a Pin on a Live Site, Managing Project Members, Tracking Comments on a Board. --- # Creating a Video Project Source: https://docs.droppnotes.com/projects/creating-a-video-project # Creating a Video Project A video project lets you upload a clip and gather feedback tied to exact moments in the footage. Reviewers drop comments at specific timecodes, draw on frames, and react — perfect for reviewing motion work, demos, or recorded walkthroughs. ## How It Works - Upload one or more video clips into a dedicated video project. - Reviewers scrub the timeline and pin comments to precise timecodes in the clip. - Mark up individual frames with a pin, rectangle, circle, or free-form drawing. - Preview a frame in desktop, tablet, or mobile framing to check responsive layouts. - Add emoji reactions to comments or to the whole video. - Large files are automatically compressed on upload to save space and upload faster. ## Steps 1. From your dashboard, click New project and give it a name. 1. Choose the video project type instead of the web type. 1. Open the project and click Upload to add your video clip. 1. Wait for the clip to compress and finish uploading — you'll see friendly progress messages while it works. 1. Invite clients and teammates and set each person's access level. 1. Play the video, pause at a moment, and drop a comment or draw a shape to leave timecoded feedback. ## Annotation Tools and Framing | Option | What it does | | --- | --- | | Pin | Drop a single point on the frame to mark an exact spot. | | Rectangle | Draw a box around a region you want to highlight. | | Circle | Draw an ellipse to circle an area of the frame. | | Free draw | Sketch a free-form scribble anywhere on the frame. | | Device framing | Preview the stage in desktop, tablet, or mobile shape for context. | ## Tips & Notes - Pause on the exact frame before adding a comment — feedback is anchored to that timecode. - Larger uploads are shrunk automatically, so you don't need to compress clips yourself beforehand. - Each member's access level controls whether they see all comments or only their own. > **INFO:** Video uploads are limited by your plan's per-file cap and your shared storage pool. If a file is too large, you'll be told before the upload starts. > **TIP:** For short clips explaining a single issue, use inline recordings on a web project instead — video review projects are best for full footage. ## Troubleshooting - Upload rejected as too large: check your plan's per-file cap and how much storage you have left, then upgrade or free up space. - Comment lands on the wrong moment: pause the player on the correct frame first, then place the pin. - A client can't see other reviewers' notes: this is expected — client access shows only their own comments. - Compression seems stuck: larger clips take longer — leave the tab open until the progress messages finish. Related topics: Creating a Web Project, Managing Project Members, Reviewing and Tracking Comments. --- # Dropping Pins and Comments Source: https://docs.droppnotes.com/giving-feedback/dropping-pins-and-comments # Dropping Pins and Comments Dropping a pin lets you click the exact spot on a live website and leave a note tied to that location. Each pin automatically captures a screenshot, the page URL, the browser, and the screen size — so whoever fixes the issue knows exactly what you saw and where. ## How It Works - Click any point on the live page to anchor a comment to that precise spot. - Every pin captures a screenshot, page URL, browser, and viewport size automatically — no manual notes needed. - Mark up the page with a pin, rectangle, circle, or free-form scribble to highlight the exact region. - Attach a short screenshot or clip inline to add extra context to your note. - Pins are grouped by the device screen they were left on, so a mobile pin stays relative to the mobile view. - Each comment gets a shareable link so teammates can jump straight to the feedback. ## Steps 1. Install the Droppnotes Chrome extension and open the live site you want to review. 1. Launch the extension, pick the project this feedback belongs to, and click Start commenting. 1. Choose a markup tool — pin, rectangle, circle, or free-form scribble — then click or drag over the exact spot on the page. 1. Type your note in the comment box that appears, and optionally attach a screenshot or short clip. 1. Save the comment — the screenshot, URL, browser, and screen size are captured for you. 1. Open the project to see your pin in the comment list or on the board, ready to be assigned and tracked. ## What Each Pin Captures | Detail | Description | | --- | --- | | Screenshot | An image of the page as it looked when you left the note, with your markup shown. | | Page URL | The exact address of the page so the issue can be reopened in one click. | | Browser | The browser you were using, which helps reproduce browser-specific issues. | | Screen size | The viewport (desktop, tablet, or mobile) so pins stay relative to the screen they were left on. | ## Tips & Notes - Use a rectangle or circle when a single pin doesn't clearly show which element you mean. - Keep inline clips short — comment clips are meant to be lightweight; longer footage belongs in a video review project. - Filter the comment list by screen size to review desktop and mobile feedback separately. > **INFO:** Inline attachments have a size limit. Screenshots and short clips must stay under the cap; anything larger should be uploaded to a dedicated video review project. > **TIP:** Every pin generates a shareable link — copy it to point a teammate directly at that piece of feedback. ## Troubleshooting - Can't start commenting? Make sure the Chrome extension is installed and enabled, then refresh the live site. - Don't see your project in the extension? Confirm you have access to it and that you're signed in with the correct account. - Attachment won't upload? Check that the file is under the size limit — you'll be warned instantly if it's too large. - Pin appears in the wrong spot? Switch to the same device view it was left on; pins are positioned relative to that screen shape. Related topics: Recording Screen Feedback, Tracking Comments on a Board, Managing Project Members. --- # Drawing Annotations Source: https://docs.droppnotes.com/giving-feedback/drawing-annotations # Drawing Annotations Annotations let you mark the exact spot on a live website or video frame so there's no confusion about what your feedback refers to. Instead of writing "the button near the top," you can drop a pin, draw a box, or scribble directly over the problem area. Every annotation is captured alongside a screenshot, page URL, browser, and screen size so your team can act on it right away. ## How It Works - Drop a pin to mark a single, precise point on the page or video frame. - Draw a rectangle or circle to highlight a wider region, such as a section, image, or block of text. - Use the free-form scribble tool to circle or underline anything the built-in shapes can't frame neatly. - On video projects, each annotation is tied to the exact timecode where you placed it, so reviewers land on the right moment. - Every annotation automatically captures a screenshot, page URL, browser, and viewport size — no manual notes required. - Switch the preview between desktop, tablet, and mobile framing so annotations stay relative to the device they were left on. ## Steps 1. Open the site with the Droppnotes extension, or open a video project, and click Start commenting. 1. Choose an annotation tool from the toolbar: pin, rectangle, circle, or scribble. 1. For a pin, click the exact spot. For a shape, click and drag to draw the region. For scribble, hold and draw free-form. 1. Type your comment in the note that appears, and optionally attach a screenshot or short clip as extra context. 1. Save the annotation — it appears in the comment list and on the board for your team to pick up. ## Annotation Tools | Tool | Best For | How to Use | | --- | --- | --- | | Pin | A single, precise point | Click once on the spot | | Rectangle | Sections, blocks, or images | Click and drag to size the box | | Circle | Rounded elements or focal points | Click and drag to size the circle | | Scribble | Free-form marks and circling | Hold and draw with the cursor | ## Tips & Notes - Combine an annotation with a written note for the clearest feedback — the shape shows where, the note explains what. - Switch the device preview to the screen size your feedback applies to, so pins stay anchored to the right layout. - Keep attachments lightweight — inline clips on a comment are capped at 5MB. For longer footage, use a video review project instead. > **TIP:** Annotations placed on a video frame remember the exact moment you paused at, so reviewers can jump straight to that point on the timeline. > **INFO:** Screenshots, page URL, browser, and viewport size are captured automatically with every annotation, so you rarely need to describe the environment yourself. ## Troubleshooting - Can't draw on the page? Make sure the extension is active and you've clicked Start commenting for the correct project. - Pin landed in the wrong place? Confirm the device preview matches the screen size you intended, then re-drop the annotation. - Attachment won't upload? Check that the file is within the size limit — inline video clips must be under 5MB and images must fit the screenshot cap. - Annotation didn't save? A weak connection can interrupt the capture — try again once you're back online and the screenshot will re-attach. Related topics: Drop a Pin on a Live Site, Review Uploaded Videos, Track Comments on a Board. ---