Getting started overview

Marker.io streamlines the process of collecting visual feedback and reporting bugs directly from websites into project management tools. This guide provides the necessary steps to get started, covering account creation, browser extension installation, and submitting your first piece of feedback. The primary interaction model involves capturing screenshots, annotating them, and then submitting them to a configured destination like Jira or Trello.

The typical user workflow begins with a team member or client encountering an issue or having feedback on a web page. They activate the Marker.io browser extension, which allows them to capture the screen, add visual annotations (like arrows, text, and highlights), and describe the issue or feedback in detail. This information is then sent to a linked project management tool, often pre-filling fields based on the captured data. Marker.io aims to minimize friction in the feedback loop by keeping all relevant context (browser information, console logs, URL) attached to each report. For a comprehensive overview of Marker.io's capabilities, consult the official Marker.io documentation.

Before proceeding, ensure you have access to a web browser (Chrome, Firefox, Edge, Safari are supported) and an active account with a project management tool you wish to integrate, such as JIRA, Trello, or Asana.

Create an account and get keys

To begin using Marker.io, you must first create an account and set up your initial project. Marker.io offers a 14-day free trial, which allows full access to features without immediate commitment.

Step 1: Sign up for a Marker.io account

  1. Navigate to the Marker.io homepage.
  2. Click on the "Start Free Trial" or "Sign Up" button.
  3. Provide your email address and create a password, or sign up using a Google or Microsoft account.
  4. Follow the on-screen prompts to set up your organization and first project. This typically involves naming your organization and creating your initial project workspace.

Step 2: Install the browser extension

Marker.io primarily operates via browser extensions, which enable screenshot capture and annotation directly from a web page. Extensions are available for major browsers:

After installing the extension, you will need to log in using your newly created Marker.io credentials within the extension itself. This links your browser to your Marker.io account and projects.

Step 3: Connect to a destination

Marker.io sends feedback to various project management and communication tools. This connection acts as the 'key' for directing your reports.

  1. From your Marker.io dashboard, select the project you wish to configure.
  2. Navigate to the "Destinations" or "Integrations" section within your project settings.
  3. Choose your preferred integration (e.g., Jira, Trello, Asana, Slack, GitHub, GitLab).
  4. Follow the authentication steps for the chosen service. This usually involves logging into your project management tool and granting Marker.io the necessary permissions. For example, when integrating with Jira, you might need to authorize Marker.io to create issues and attach files to your Jira instance. The specific permissions requested are designed to allow Marker.io to create and update tasks in your chosen system. For detailed setup instructions per integration, refer to the Marker.io integrations documentation.
  5. Once connected, configure mapping rules if desired. These rules automatically assign issues to specific projects, assignees, or statuses based on criteria from Marker.io.

Unlike some APIs that provide a single API key for all operations, Marker.io's primary integration points are through OAuth-based connections to external services, managed per project within the Marker.io dashboard. This means there isn't a single universal API key to retrieve in the same way you might find for a REST API directly accessing Marker.io's functionality. Instead, the 'key' is the authenticated link to your chosen destination.

Your first request

Making your first 'request' with Marker.io involves capturing and submitting feedback using the browser extension. This process sends a structured report to your configured destination.

Step 1: Activate the Marker.io extension

  1. Navigate to any web page in your browser where the Marker.io extension is installed and active.
  2. Click the Marker.io icon in your browser's toolbar.

Step 2: Capture and annotate a screenshot

  1. Upon activating the extension, you will see options to capture a visible area, an entire page, or record a video. Select "Capture visible area" for a quick test.
  2. The browser will dim, and a crosshair will appear. Click and drag to select the area you wish to capture for feedback.
  3. Once captured, the Marker.io editor will open. Use the tools provided (arrows, text, boxes, blur) to annotate the screenshot. For instance, draw an arrow pointing to a specific UI element and add a text box explaining a perceived bug.

Step 3: Fill in feedback details and submit

  1. In the Marker.io editor, fill in the report form.
  2. Title: Provide a concise summary (e.g., "Homepage button misaligned").
  3. Description: Add more details about the issue or feedback (e.g., "The 'Learn More' button on the homepage is shifted to the left on Chrome, affecting its alignment with other elements.").
  4. Assignee (optional): If configured, you can assign the report to a specific team member directly from Marker.io.
  5. Severity (optional): Categorize the report's impact (e.g., Minor, Major, Critical).
  6. Review the automatically collected technical information, such as the URL, browser version, operating system, and console logs. This metadata is automatically appended to the report, which is a key advantage for developers when debugging, as detailed in web development best practices for bug reporting, such as those outlined by Mozilla's web debugging documentation.
  7. Click the "Submit" button.

Upon submission, the report will be sent to your connected destination (e.g., a new issue created in Jira, a card in Trello, or a conversation in Slack) with the screenshot, annotations, and system information attached. You can verify successful submission by checking your project management tool.

Common next steps

After successfully submitting your first piece of feedback, consider these common next steps to further integrate Marker.io into your workflow:

  • Invite Team Members: Add other users to your Marker.io account and projects to collaborate on bug reporting and feedback collection. Access this through the "Members" section in your organization settings.
  • Configure Multiple Destinations: If your team uses different tools for various projects or departments, connect additional project management tools as destinations within your Marker.io projects.
  • Set Up Advanced Rules: Customize how feedback is routed and categorized by setting up specific rules within your Marker.io project settings. For example, reports from a specific URL could automatically be assigned to a particular team member in Jira.
  • Utilize Guest Reporting: For external stakeholders or clients who do not have a Marker.io account, enable guest reporting. This allows them to submit feedback directly without needing to log in, often via a custom embeddable widget on your website. Learn more about Marker.io guest forms and widgets.
  • Explore Embeddable Widgets: Beyond the browser extension, Marker.io offers embeddable widgets for your website, allowing users to report bugs or provide feedback without installing an extension. This is particularly useful for public-facing sites or client portals.
  • Review Reporting Analytics: Monitor the volume and types of feedback being submitted through your Marker.io dashboard to identify trends and common issues. This can help prioritize development efforts and improve product quality.

Troubleshooting the first call

If your first feedback submission encounters issues, check these common points:

Table: Troubleshooting the first Marker.io submission

Step What to do Where to check
Account Login Ensure you are logged into both your Marker.io account and the browser extension. Marker.io dashboard, browser extension icon
Extension Active Verify the Marker.io browser extension is enabled in your browser settings. Browser extension management page (e.g., chrome://extensions)
Destination Connected Confirm your Marker.io project is linked to a valid project management tool (e.g., Jira, Trello) and the connection is active. Marker.io project settings > Destinations
Permissions Check that Marker.io has the necessary permissions granted in the integrated project management tool. Settings within your project management tool (e.g., Jira application links, Trello power-up settings)
Firewall/Ad-blocker Temporarily disable any browser-based ad-blockers or firewalls that might interfere with script execution. Browser extension settings, system firewall settings
Browser Compatibility Confirm you are using a supported browser version and that it is up to date. Browser's "About" page or update section
Project Scope Ensure the feedback is being submitted to the correct project within Marker.io and that project is linked to your intended destination. Marker.io project drop-down in extension, project settings
Network Issues Verify your internet connection is stable. System network status, trying another website

If issues persist after checking these points, consult the Marker.io troubleshooting documentation or contact their support team for assistance. Providing details like browser console errors (which can be accessed by pressing F12 in most browsers) and a description of the steps taken can help expedite resolution.