[Tutorial]: How To Add a Client Feedback Widget To Your Webflow Site

If you’re building Webflow sites for clients, they will want to send you feedback and bug reports.

That’s inevitable

  • I don’t like this font
  • The contact form does not work
  • The image does not show up

The best way to collect this feedback is through a website widget with visual annotations!

602cf05bb5af2959b5b0d9ff_webanimation-loop-optimized-transcode-optimized-optimized

Let’s see how it works.


1. Create a Marker account

Sign up for a Marker.io account and follow the steps to make an account. You’ll be prompted to authenticate with your favorite project management tool like Jira, Trello, Asana (and more).

This will allow you to collect your client feedback on Webflow sites, directly into your favorite tool (more on that later).


2. Design your widget

Time for the fun part, creating your feedback widget that will live on your Webflow site for your clients to send you feedback.

We recommend that you:

  • Upload your logo
  • Pick a color that matches your brand
  • Build your feedback form

CleanShot_2022-08-17_at_13.10.16

Pro tip: Because you’ve connected your widget to your favorite project management tool, all widget fields are synchronised with your native integration fields.


3. Install widget on Webflow

Grab the snippet under Installation in Marker

Embed it under your Webflow Project Settings > Custom Code > Head Code.

Don’t forget to Save and Publish your site.


4. Submit feedback on your Webflow site

When you go to your Webflow site URL, you will now see your client feedback widget. Your team and client can now easily submit feedback and bug reports with visual annotations!

Marker.io_Sample_Capture


5. Receive feedback

For each piece of feedback, your team will get a detailed overview of the feedback with annotated screenshot, technical session data such as browser, OS, page URL, and even console logs.

You can also communicate directly with your clients.

CleanShot_2022-08-17_at_13.17.17

And because your widget is connected to your integration, you will find the same information in your tool - in this case Jira.

CleanShot_2022-08-17_at_13.24.21

Pro tip: All communication in Marker.io will be synced back with your Jira, Trello, Asana, or any other tool you might have connected.


6. Notify clients when resolved (without leaving your tools)

When a feedback item has been addressed, simply mark it as Resolved. And better yet, because of the 2-way integration, your clients will be notified as soon as you close an issue in your project management tool.

That’s it :grin:

Congrats!

You now have a strong workflow for collecting client feedback on your Webflow site!

If you have any questions reach out to support@marker.io.

1 Like

@vincent I saw you tagged our tutorial as self-promotional but we respected the structure of similar tutorials like these 2:

How is our tutorial different than those? I’m happy to provide some edits so it fits the guidelines for a tutorial.

It looks like very nice service that will be helpful as internal tool for large companies or agencies to communicate but IMO for freelancers may be min starting price $40/month a bit costly as such things as notes can be done in shared Figma files to make changes before coding stage or with video meetings. There may be also barriers that client doesn’t want spend time on screenshots, adding notes etc. or just doesn’t know or willing to learn how to use it. It is good to know that service like this exist.

m2c