All Collections
Guides
Marker.io 101 | Get Started Guide | Academy
Marker.io 101 | Get Started Guide | Academy

Everything you need to get started with Marker.io!

Joe Scanlon avatar
Written by Joe Scanlon
Updated over a week ago

This video playlist will help you quickly set up and customize your account to get to what's important: collecting website feedback.

If you reach a lesson that doesn't apply to you right now, skip ahead to what does.


What is Marker.io

Marker.io is a website feedback tool that allows anyone to give and receive actionable feedback. Reporters can click our website widget, annotate a crisp screenshot, and submit a short feedback form. All that information will make its way directly to your internal tools.

We automatically capture various technical data, including browser and operating system information. You'll never again have to ask, "What browser were you using?"


What is a project?

A project is where your users report their website feedback. A project can be an integration with your favorite issue tracker or project management tools, or you can continue without integration and use Marker.io as your issue tracker.

How to add a project

Begin by inputting the name of your project and the website you would like to collect feedback from. Next, choose whether you'd like to use one of our integrations or continue without integration and use Marker.io as your issue tracker.

If you decide to use one of our integrations:

  • We will ask for some credentials, which we will keep to a minimum.

  • We keep your data safe using advanced security, including AES 256 and OAuth. Learn more at marker.io/security.

  • Once connected, you will see the list of your available projects.

  • A good practice is having one Marker.io project per integration project.

Widget Overview

The Marker.io widget is a small button that lives on your website. This is how your reporters will submit feedback and report bugs.

Match your company branding by changing the button color, position, and text.

Show the button to everyone that visits your website or display it to specific users, like your clients or internal team.

If you don’t love the design of our button, you can hide it and trigger the widget through our secret visibility options.

You can also link our code to your own custom button.

Once you click on our widget, it contains two distinct sections:

  • The automatically generated screenshot, which you can annotate

  • The feedback form can be simple or as complex as you wish

Widget Installation

To install the widget, you have many choices.

  • Our most popular method is installing the code manually once you have access to the backend of your website.

  • If you use a CMS like WordPress, we recommend our CMS plugins.

  • If you are developing a web app, you may prefer our NPM package installation.

  • And finally, if you do not have access to your website code, use our browser extensions.

  • If you are unsure, send a note to your developer, and this will even contain our most popular option of installing the snippet code.

Widget snippet code Installation

The manual snippet code is our most popular installation method once you have access to the backend of your website. It’s an ideal installation method to capture feedback from a wide range of desktop and mobile devices.

Copy the snippet code and paste it anywhere above the closing head tag on your website. You can now begin reporting feedback.

Widget WordPress plugin Installation

If you build websites on WordPress, consider the latest version of our WordPress plugin to activate the widget.

  • In the plugin marketplace, search for Marker.io. Install and activate.

  • Once you open the plugin settings, you can connect with your Marker.io account and choose the appropriate project.

  • Explore the settings, including enabling in the admin section, displaying to specific users, and post types.

Once you are happy with your settings, it's time to start reporting feedback.

Widget browser extension installation method

When you do not have access to the backend of a website, the best installation method is via our browser extensions.

We have extensions for all major browsers.

Above I choose the browser extension and select that I want to activate the widget.

I choose to report feedback on Netflix, but I do not have access to the backend.

Only people invited to this project can access the feedback widget on Netflix once they install the browser extension.

It's simple to install the extension by clicking through the onscreen instructions.

Since I am part of the team on this project, I see the feedback widget on Netflix when I click on report feedback. How cool is that?

Feedback Form Overview

Within each project, we have a guest and member feedback form.

Think of guests as external users or clients with limited technical knowledge, and think of members as advanced internal users like your QA team.

All form fields sync with the integration tool you use, in the above case, Trello.

You can preset your fields, hide them or make them visible.

You can add your own logo and remove the "powered by Marker.io" text at the bottom of the form.

Members & Guests

Members

Members can create and manage projects.

For each project they have access to, members can:

  • Add and review feedback

  • Edit widget settings

  • Manage project settings

By default, members will be invited to all projects. You can change that setting.

Guests

  • Can be invited on a per-project basis.

  • Get to see their own feedback and other guest feedback (where allowed)

Guests and members can be managed from your project settings.

Guests will report feedback via the guest form, and your members will report on the advanced member form.

Public Reporters:

If you wish to collect feedback from people not invited to your Marker.io account (Public Reporters), you can go to the button settings, make it visible to everyone, and the public feedback will come through the guest form.

We encourage you to read through the following articles to understand our user roles and their interactions

The Feedback Page

A comprehensive Feedback Page is generated when a user submits feedback on your website. This page features a sharp screenshot that accurately identifies the specific area related to the feedback. A Session Replay video offers a deep, contextual understanding of the reporter's experience on your website leading up to their feedback submission. Informative technical data such as the reporter's device type, browser information, and screen size are automatically captured to help your team replicate issues.

On the right-hand side, you can communicate with your reporters, they will receive an email where they can reply. All communication will be synced to the feedback page. If you integrate with any of our issue trackers or project management tools like Jira here everything will be synced there also.

Finally, one of our most important features: when you close an issue in your PM tools, it will automatically resolve the issue feedback page and notify your reporter that the issue is now resolved, streamlining the entire feedback process.


Status Sync

Avoid the back and forth between tools and marker.io with status sync. When you close the issue in your tool, we'll automatically resolve it and notify your reporter. Now your clients will always be in the loop.

Status Sync is available on most of our integrations, including Jira, Trello, Asana, ClickUp, and many more, helping you streamline your feedback reporting process.

Once your integration allows it, all projects are enabled with status sync. You can disable status sync on a per-project basis. Navigate to your project Settings > Status Sync > Switch off the auto-update feature.


Did this answer your question?