New feedback tool ‘Duat’ released

Duat is a simple, lightweight user acceptance tool written in Django.

It requires minimal integration with the target website – only requiring a single script tag inserted at the end of the page. It’s intended to be used to allow site visitors to report problems and issues that they come across such as:

  • Highlighting CSS issues
  • Reporting spelling mistakes
  • Submitting bug reports

I developed duat primarily for use with our BOS2 tool and modelled it after Google’s feedback mechanism. I originally intended to use feedback.js but found SVG usage caused problems when used within chrome (I also found you don’t always get an exact replication of the user’s rendered page), so instead I created this tool. Duat uses PhantomJS to create a screenshot of the captured page but also retains the html so that the page can be fully inspected.

It leverages django’s admin interface to provide the backend access to submitted reports and screenshots.

Duat in action

All it takes to integrate the client-side tool is to add a single script tag to the end of your html file. The feedback tool uses local jquery if available, otherwise it will dynamically load one from ajax.googleapis.com.

Screen shot 2013-04-19 at 23.37.58

 

Once this line has been added, a small feedback button appears on the bottom right of the page.

Screen shot 2013-04-19 at 23.46.59

 

This button provides access to the client tool. The user can provide a textual description of the issue as well as highlight specific elements on the page with their mouse.

Screen shot 2013-04-19 at 22.04.46

 

The user hits ‘Send’ and the page is submitted back to the duat server. Once the feedback is received duat will send an email to the site administrator with a link they can follow to view the submission.

Screen shot 2013-04-19 at 22.11.19

 

 

Duat is available on github.com.