I worked on a small AJAX widget for user feedback built atop jQuery UI: Reflex Feedback. It’s inspired by the widgets you see from services like Get Satisfaction and UserVoice, but much simpler and it’s a frontend-only widget, how you handle the feedback info on the backend is up to you.
Here’s what it looks like.
And here’s what the tag that opens the dialog looks like:
To use it, download or clone the ReflexFeedback repo from bitbucket
Place the .js file wherever you’d like but the /reflex.content folder should a subdirectory in the same folder as the page loading the .js file. Load reflex.js as you would any other javascript file:
<script type="text/javascript" src="js/reflex.js"></script>
Call Reflex.init() to add the widget to the page. The first argument is the DOM element to attach the additional HTML/CSS code to. The seconds argument is the server-side script to call when the user clicks Send Feedback.
Reflex.init($('body'), 'controller/post_feedback.php');
That’s it for the frontend. You should see the tag show up in the right-hand corner and when clicked the dialog open.
For the backend, the AJAX call to send the feedback info will send a POST request with 2 fields: feedback_type, feedback_txt.
Reflex expects an XML reply from the server:
<reflex>
<result>ok</result>
</reflex>
ok indicates a successful result, any other reply is considered an error.
A successful result will close the dialog and show another with a thank you message.
For an error, a message is shown below the Send Feedback button, informing the user that an error has occurred and to try again.
As for what to actually do with the feedback, that’s up to you, but what I’m doing is sending myself an email with the feedback info. I’ve posted my PHP script below; feel free to use it, modify it, etc. If you do use this code, be sure to fill in your mail server credentials and a from address; you’ll also need PEAR’s Mail package installed.
<?php
require_once "Mail.php";
require_once "Mail/mime.php";
header('Content-type: application/xml; charset=utf-8');
echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n";
if(!isset($_POST['feedback_type']) || !isset($_POST['feedback_txt']))
{
echo "<reflex><result>error:missing-arguments</result></reflex>";
}
else
{
$from = "...";
$to = "...";
$subject = "Feedback from user...";
$feedback_type = $_POST['feedback_type'];
$feedback_txt = $_POST['feedback_txt'];
$bodyHtml = "<html><body>";
$bodyHtml .= "<p>Type: {$feedback_type}</p>";
$bodyHtml .= "<p>Feedback: {$feedback_txt}</p>";
$bodyHtml .= "</body></html>";
$body = $bodyHtml;
$host = "...";
$port = "...";
$username = "...";
$password = "...";
$headers = array('MIME-Version' => '1.0rn',
'Content-type' => 'text/html; charset=utf-8',
'From' => $from, 'To' => $to, 'Subject' => $subject);
$smtp = Mail::factory('smtp',
array ('host' => $host,
'port' => $port,
'auth' => true,
'username' => $username,
'password' => $password));
$mail = $smtp->send($to, $headers, $body);
if (PEAR::isError($mail))
{
$err_details = $mail->getMessage();
echo "<reflex><result>error:send-failure</result><details>{$err_details}</details></reflex>";
}
else
{
echo "<reflex><result>ok</result></reflex>";
}
}
?>
That’s all for now. I’ll work on more features and options for customization in the future. You can see the widget in action over at dotspott.com
