Reflex Feedback widget

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.

reflex feedback widget dialog

And here’s what the tag that opens the dialog looks like:

reflex feedback widget tag

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.

reflex feedback thank you dialog

For an error, a message is shown below the Send Feedback button, informing the user that an error has occurred and to try again.

reflex feedback send fail

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

13 Comments

  1. Don

    Hi Avishkar,

    I use your js as following:

    test

    $(document).ready(function(){
    Reflex.init($(‘body’), ‘controller/post_feedback.php’);
    });

    But always got JS errors as:
    $(“#reflex-feedback-dialog-entry-area button”).button is not a function
    [Break On This Error] $(“#reflex-feedback-dialog-entry-area button”).button();

    How to solve the problem?
    Thanks!

  2. Avishkar Autar

    Looks like your missing jQuery UI or a part of it.

    Make sure you have jQuery UI and you’re using a jQuery UI file with the button and dialog components included.

  3. Don

    Thank you so much!

  4. Don

    Hi Avishkar,

    I still have another problem. When I use your js under IE, the feedback.png appears at the top left of the window. In FF and chrome, it is fine.

    test

    $(document).ready(function(){
    Reflex.init($(‘body’), ‘controller/post_feedback.php’);
    });

    Any suggestions?

    Thanks in advance!

  5. Avishkar Autar

    hmm, that’s weird, which version of IE?

  6. Hi,

    I am wondering if it is allowable to modify the source code and UI of the feedback screen, including removal of the attribution from feedback screen, IF I keep the attribution in the reflex.js script intact?

    Please let me know.

    Also, thanks for creating this great tool!

    Jason

  7. Avishkar Autar

    @Jason, sure. It’s released under the BSD license, so you can pretty much do anything w/ it, just put the copyright notice in the source if you redistribute it and don’t use my name for any promotion or endorsement of your product or service.

    However, the icons are by Yusuke Kamiyamane (pinvoke.com), so if you continue to use them you must respect his attribution requirements.

    If you make any changes you’d like to see me incorporate into the next version, let me know.
    Also, feel free to post a link to what your working on, I’d love to see how others are using this.

  8. Amit Saxena

    Thanks man for the widget 🙂
    A little bit of customization did the job.

    Drop in your email id, I surely will send you an invite once I roll in my application to production.

  9. Hi,

    You can see it in action here:
    http://www.billbaba.com

    Don’t forget to try out the product and send in your valuable feedback 🙂

    The feedback widget had issues in ie6 and 7. Even though the mail is sent, it shows error – “Failed to send your message. Please try again.”

    I tried debugging and found out that the problem was because var result = $(‘result’, data).text(); was returning an empty string, even though data was having the returned value. I am no js expert, so tried to fix the problem by going around and changed the condition to:

    var result = data.search(‘ok’);
    if (result >= 0) {
    Reflex.onSendSuccess();
    }
    else {
    Reflex.onSendFailure();
    }

    See if you need to change your code to fix the ie6 and 7 issues.

    Thanks,
    Amit

  10. Kompass…

    […]Avishkar's Blog » Reflex Feedback widget[…]…

  11. Good afternoon, I would first like to congratulate the creator of the post … Secondly I would ask, that you please send me this code with the files in php, really need something to help me, I’ve done most of the examples douwload without php it is not working ..

    Thank you all.

    Att
    Emerson

  12. I need help, please send me the php files.
    Please …

    sethomaz@gmail.com

    Thank you

  13. Avishkar Autar

    This is a Javascript widget, all related JS code is available @
    https://bitbucket.org/aautar/reflexfeedback

    It makes an AJAX call to a server-side script.
    The script I made was PHP to email the feedback; all the code for which is in the post above (minus login credential for the mail server)