Installing the Marker.io widget on your website via a JS snippet of code only takes a few minutes. Once installed, you will be able to collect bug reports on your website from Members and Guest reporters.

To control exactly who you want to collect feedback from, set your widget privacy according to your needs.

JavaScript: Pros Vs Cons

Pros

Cons

  • Requires access to your website’s code.
  • Reporting limited to the website where the script is installed.

1. Add a destination

First, you will need to add a destination by connecting your favorite issue tracker.

This will allow you to collect bug reports directly inside your favorite task management tool. You can learn more about adding a destination here.

2. Configure your widget

Once your destination is added, you can start to configure your widget.

Appearance

Match widget look & feel to your needs in the button setting.

Privacy

Define who can report feedback by the setting right privacy setting.

Form

collect relevant information by building your own form.

3. Install Script on your website

Scroll down to the Installation section inside the Widget tab and click on Install script.

Copy and paste the snippet code (that includes your unique destination_id) and paste it anywhere in the `<head>` or `<body>` tag on every page you want the widget to appear.

4. Verify your script installation

Verifying your script will prevent anyone from “stealing” your widget, installing it on random websites, and flood your issue tracker with spam.

To verify your script, make sure to list all domains that you trust and click on Verify.

If you’re using sub-domains, it’s important to list them all separately like this:

https://example.com
https://blog.example.com

However, you do not need to specify the paths for each website. For example, you do not need to list example.com/blog as example.com is the trusted domain

You can also manage your domains under the Website domains menu

5. Choose who can see the widget

Define who can report feedback by setting the right privacy setting.

6. Test your widget

Remember that depending on your role, your widget might look different than for others.

Testing as a Member

First, make sure that you are logged into Marker.io and you have access to the destination.

Second, go to the website where the widget is installed and click on the button. After annotating your screenshot and filling out the form, the widget will close and a notification will pop up.

Clicking on the success notification will open your newly created issue in whatever project management tool you set up as a destination (Trello, Jira, Asana,...).

Congrats, your widget works!

Testing as a Guest

If you want to test the widget as an Guest, start a new browser session and make sure you are not logged into Marker.io in the background.

Go to your website and click on your newly installed widget. After annotating your screenshot and filling out the widget form, you will be asked to provide an email address the first time you report.

It’s important that you use a different email address! If you use the email address associated with your Member account, Marker.io will recognize your email address and will ask you to authenticate first and update the widget with your internal advanced form.

After entering a secondary email address, the widget will close, a confirmation email will go out and a notification will pop up.

Clicking on the success notification will open an external view of the newly created issue in whatever project management tool you set up as a destination (Trello, Jira, Asana,...).

Congrats, your widget works!

Related articles:

Did this answer your question?