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 from:

You also have many different options for controlling exactly who can see the widget as you'll see below

Why install Marker.io via Javascript? (Pros Vs Cons)

Pros

  • Does not require reporters to install browser extensions.
  • Reporters do not need to be invited via email first.
  • Works across all browsers
  • Works on mobile devices

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’s appearance & forms

Once your destination is added, go to the widget tab.

Before installing your widget, we recommend that you personalize the widget appearance (color, placement, text) as well as the forms inside the widget.

You can preview your widget in real time as either a Member, an External reporter or a Client.

You’ll notice that depending on the reporter’s role, the widget will be slightly different. Learn more about the difference between the Basic form and the Advanced form here.

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.

5. Choose who can see the widget

There are multiple ways to control the visibility of your widget, which all fall under 2 control settings.

Per role (who)

By default, the script will allow any public visitor and non-logged users to report bugs. However, you can block external reporters from submitting bugs via your widget.

Disable the Allow external reporters setting and the widget will only show up for Members and Clients that are logged into Marker.io and listed inside the destination user list. If you're a logged-in Member or Client and still can't see the widget, make sure that your browser allows our cookies to authenticate you by following this guide.

Per web page (where)

You can define on which web pages you want the widget to load. However for this method, you will need to rely on your own developers. Ask them to exclude the script from the pages on which you don’t want the widget to show up.

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 an External reporter

If you want to test the widget as an External reporter, 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?