Feedback widget: How to Use a Website Widget to Speed Up Testing
Talk to salesTry Marker.io for free
Marker.io Updates

Feedback widget: How to Use a Website Widget to Speed Up Testing

Last updated:
January 14, 2021
Contents
    Contents

    When we started Marker.io, we wanted a quick and easy way to report bug during our testing sessions.

    That's why Marker.io started as a browser extension —  easy to install, no need to get access to website code, etc.

    But the browser extension came with its own set of limitations:

    • Every reporter must install the extension
    • It does not work on mobile devices
    • It requires a Marker.io account to use

    That's why we are so excited to introduce our new website widget that addresses all these limitations and more. By the way, it has been our most requested feature for months!

    1. Widget lives on your site

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/10014cce-2c28-44a9-b60d-667ff07d21a6/Group_181.png

    When you install the new widget on your site, anyone can submit feedback and report bugs, directly in your website. Get less client calls and feedback emails!

    Customer quote

    I love that the widget is always present, and in one click our non-technical people can give information about what they are experiencing and seeing on our platform.
    - Monty Kosma, CTO at Darcy Partners

    2. Control who can see the widget (Public vs Limited)

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/42fdaf90-df98-486e-9002-aef062d779dc/Untitled.png

    You choose to only show the widget to your team and clients, even on your live website! Alternatively, you can open it up to anyone who lands on your site, even if they don't have a Marker.io account. Your call!

    Customer quote

    We use the widget on our production site, but we have it configured to show only for our internal team members because of the amount of visitors we get.
    - Andrew Hahn, Product Manager at Fantasy Pros

    Learn more about how to configure your widget privacy settings here.

    3. Mobile ready & cross-browser

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5a180a6f-724f-473d-bb97-b33577aa02ee/625-f29f227f4b2093dbb7ab5ac4e080f82eff6ad099.png

    When you install the widget via snippet code, it will work on any device and browser you access your site.

    Learn more about mobile reporting.

    4. Built-in screenshot capture & annotation

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d956efd7-c0d8-45cb-be38-8ec6837a6a9c/ScreenshotAnnotation.gif

    The widget automatically captures a screenshot that you can annotate without leaving your site. No more leaving your workflow while testing!

    Customer quote

    I don't need to save any screenshots on my desktop anymore, and that's good. Desktop is where screenshots go to die. - Megan Carrier, Product designer at Manta Health

    5. Multiple forms: Team members vs Guests

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/cf58345b-e7eb-4b6e-af71-844c8dc35b95/Group_560.png

    Not all reporters have the same need. An internal QA will need to add more context every time they report an issue, while a client will only need access to fill out a description and maybe add a label.

    Marker.io can detect if you're an internal team member or a guest and display a simplified form when needed.

    Learn more about how forms work.

    6. Customize look and feel

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/05dec2bd-1de4-4d31-bbe6-0f364b81fc45/CleanShot_2021-01-11_at_18.29.09.gif

    You can change the widget color, placement and text to match your needs and branding. All changes will be instantly reflected on your site.

    Learn more about widget button customization.

    7. Integrate inside your app via API

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/8862288e-a7dc-4c32-8934-ef7669da405f/226-998f02bab60ce57cf6f835e6ec3438cd1929bc3e.png

    You can even use or Javascript API to bind the widget to your own HTML button or links.

    Customer quote

    We integrated the widget in our own help menu. This allow us to do quality control from end-users, without having the Marker.io widget visible on every page.
    Kasper Tikjob, founder at Tikweb

    Learn how to bind with your custom button here.

    8. Automatic recording of technical data

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/032c474c-7f7c-4f5e-894b-08219fafd23a/Untitled.png

    Page URL, browser... but also console logs. Even FullStory sessions if you have it installed. You will also soon able to pass custom meta data (coming soon)

    Customer quote

    Marker.io helps our developers to see the bugs through the eyes of the reporters, with no information getting lost.
    Monty Kosma, CTO at Darcy Partners

    How to install the widget?

    You have 2 options to install the widget

    • Install via javascript: Required access to site’s code, but does not require people to have a Marker.io account to report
    • Activate via extension: does not require access to your site’s code, but does require users to be invited to Marker.io

    Read the documentation to install the widget.

    What should I do now?

    Here are three ways you can continue your journey towards delivering bug-free websites:

    1.

    Schedule a demo with us to see Marker.io in action. We’ll personalize the session to your needs and answer any questions.

    2.

    Read Next-Gen QA: How Companies Can Save Up To $125,000 A Year by adopting better bug reporting and resolution practices (no e-mail required).

    3.

    Follow us on LinkedIn, YouTube, and X (Twitter) for bite-sized insights on all things QA testing, software development, bug resolution, and more.

    Continue reading

    Frequently Asked Questions

    Get started now

    Start free trial
    Free 15-day trial  •  No credit card required •  Cancel anytime