AJAX Feedback Mechanism
UPDATE June 14: Just uploaded the updated version of the mechanism.
The follow changes are in place:
1. You need to click on the feedback to make it popup
2. There is a field for adding comments
3. Rating increases left to right
4. There is a fadeout in Mozilla. IE we haven’t been able to get it working right.
There are a few misc tweaks (eg you can now click on the feedback image to close it again). The JS has also been cleaned up - the download includes a compressed version and an uncompressed version. You can tweak and set variables easily also.
– End Update June 14
One thing that I have always tried to solicit as much as possible is user feedback. For example, when a user signs up for Toronto, they get a personalized email from me, complete with my actual email address. I want to make it as easy as possible to give feedback.
So a few weeks ago I was thinking how people are using our site, but I have no clue what their feelings are. Are the results good? Great? Craptastic? Repeat visitors are not a good measurement either - I used to visit Toronto.com a lot, but only because they were really the only game in town. Did I like their site? Not really … but I kept coming back out of necessity.
So we set out to build a quick and easy feedback mechanism. A little floater/popup that lets you quickly rate a page. All AJAX driven of course.
Nicely packaged (it requires minimal HTML editing, and can be fully manipulated through CSS) I give you: AJAX Feedback Mechanism.
On pageload, the JS is executed through an onload statement inside the
tag. It finds the proper div (in this case feedback_wrapper) and puts in the HTML there. Then as the person browses around the page, it hovers gently in the bottom right.Open hovering over, it opens up a little dialog box (which you can control through feedback.css).
Upon clicking on a rating, the AJAX comes into play - the user response is sent to feedback.php, the entry is stored, and a thank you message is given. A cookie is also set so that the feedback system won’t show again (in the case of the demo this is disabled).
Quick links for those that skim through posts:
Demo: taken down for now
Download: taken down for now
Thanks to Jayson for his great work in getting exactly what we needed.
June 8th, 2006 at 6:40 pm
I likey! Might be a bit more marketable if it were prettier…I’m gonna do a bit ‘o tweaking to get it all snazzy.
Thanks!!!
June 8th, 2006 at 6:43 pm
Nice!
June 8th, 2006 at 6:43 pm
With a sidebar open in Firefox (in this case the Sage RSS reader), the feedback button appears on the left, not right, of the screen. Also, the acutal feedback box then seems to appear under the feed pane. It works fine without Sage open.
June 8th, 2006 at 6:45 pm
You know, as soon as I started reading I thought to myself, “I hope its not some thing that moves as you scroll.”
I’m sorry, but having weird moving objects on a site just distract me from the site itself, and after a while, they just become bothersome.
It’s a good idea, but I don’t like the fact that it moves.
June 8th, 2006 at 7:00 pm
Tony Bullard: As the article says you can manipulate the css to your needs, so its no problem to lock it to a given spot on your page.
June 8th, 2006 at 7:00 pm
Awesome!
June 8th, 2006 at 7:10 pm
If I saw something that irritating on a website I would leave and never come back.
June 8th, 2006 at 7:16 pm
Looks nice, but i only can run ASP code on my current server not PHP. Have a sample in ASP?
June 8th, 2006 at 7:21 pm
cool stuff, but it needs to hide itself in case a user accidentally had his mouth graze the [+] icon. It stays there after it’s openned, which can be rather annoying.
June 8th, 2006 at 7:26 pm
Would be nice to incorporate an actual form in there - small but effective.
Nice job btw on the script.
June 8th, 2006 at 7:26 pm
cool
June 8th, 2006 at 7:32 pm
Removed some of the comments that were just pure spam.
To reply to everyone one by one:
@Garraeth: Enjoy with the CSS
I prefer things as simple and basic as possible - do add a link when you end up prettifying it
@Travis: Thank you.
@Mike: Hrmm that isn’t good. Will look into it. I just tried with the Bookmarks sidetab open (Ctrl+I) and it was fine.
@Tony: I almost agree, except I really think it is very unobtrusive. I will try a fade in/out so that it re-appears in teh bottom right.
@Tester: Thanks
@blame: fair enough. I don’t think anything on the web makes everyone happy, and unfortunately you find it so irritating
@Candyman: download the code. The actual .php part just takes in a variable, saves the data, and spits out a response. The variable itself is just ‘r’ as a GET variable, so porting it would be super easy
@mitch: I was looking at having it automatically close, but testing it out on Average Joes they kept ‘over-steering’ their mouse and missing it. Maybe I will make it onclick instead
@Chuck: Thanks - I thought about adding a form, but as my original motivation was to use it for our search results, I decided a form would be distracting. You are free to use it as you want
@rai: Also thanks
June 8th, 2006 at 7:33 pm
This has been done before, just with slightly less gracious technoloies as AJAX. Why does everyone freak whenever something is AJAXified? This is not revolutionary, this is renewal. I really like AJAX applications for what it’s worth - but this much hype is crazy over every new product that comes about.
June 8th, 2006 at 7:35 pm
“If I saw something that irritating on a website I would leave and never come back.” - Blame
You’re easilly annoyed ey?
June 8th, 2006 at 7:39 pm
Sorry Oliver, not meant as hype. This is meant as a quick and easy package that anyone can use to extend (or not) and put it on their website. The AJAX just makes it less annoying (in my opinion).
At the same time, if you are referring to what other sites like Adobe etc use, they include a popup that includes half a dozen ranking methods. This is (on purpose) much simpler.
June 8th, 2006 at 7:40 pm
I hate these things, they’re so annoying. I’m always drawn to them down in the corner. Sites like adobe.com are nearly ruined for me because of these things. So annoying. If feedback is that important to you, just make it a dedicated page on the site instead of it being everywhere all the time.
June 8th, 2006 at 7:51 pm
@Michael Griffith: I agree that Adobe’s method of having a seperate feedback button for EVERY SINGLE PAGE is annoying, but I think most people will have a one-per-site type of feedback button, which is considerably less annoying (because you click it and its gone forever, thanks to cookies). Personally, I’m going to make mine set the cookie if they close the box without voting, so they won’t accidently open the box a thousand times and get frustrated.
@AhmedF: Great work! And a fade in/out would be AWESOME.
June 8th, 2006 at 7:53 pm
Not bad, looks good
June 8th, 2006 at 7:53 pm
heard u got great ajax shiny things
June 8th, 2006 at 8:05 pm
Works fine but is there any reason why you made no mention of the company/system you’re reproducing (opinionlab.com). Give credit where credit is due.
June 8th, 2006 at 8:16 pm
Too bad it fails with a JS error and does not work in IE 7. Given it’s a beta, but sheesh….
June 8th, 2006 at 8:19 pm
Duh, I retract my comment about IE 7. I just saw your disclaimer on the demo page.
June 8th, 2006 at 8:21 pm
So why don’t you have one running on this page?
(one of my biggest pet peeves is advice from sites who they themselves don’t use teh stuff the advocate)
June 8th, 2006 at 8:27 pm
@Jon: I’m not sure what you mean - we have seen several versions of the feedback system - we just created one that was small and focused on one thing (getting quick feedback)
@Jmx: Good point - if you read my post it is for the actual iBegin site, not this blog. On top of that, it is for our search results. Lastly, and I mentioned this in one of my latest posts, a new design is incoming, when we will be using this
June 8th, 2006 at 8:35 pm
Looks like it was already noted, but just another reminder that it’s not IE7 compatible
June 8th, 2006 at 8:48 pm
I went though the code (quickly) and I have question: Why inject the HTML run-time? Why not define the markup in de HTML file?
Also, a tip: since it pops up when you move over the ‘icon’, I think you could put the popup ontop of, and centered on, the icon. This let’s the user make less mouse movement. Then when the mouse leaves the popup area, you hide it agai, so there’s no need for the user to click it away.
June 8th, 2006 at 8:52 pm
OOOOOOOOOhhhhhhhhhhhhhhhhhhhh.
Are u 4 sale?
June 8th, 2006 at 9:03 pm
@remcoder: The HTML inside the JS was done on purpose - I wanted it very easy to add it to an existing page. Instead of having to copy a chunk of HTML, all you need is that one div. Plus its better bandwidth management - instead of having that HTML on the end of every page, it gets cached with the JS file
We will likely be releasing an updated version with a few tweaks. The reason we didn’t include mousehover are the associated headaches with twitch movement
#Phil - Umm. http://www.ibegin.com/philosophy/ - item #3
June 8th, 2006 at 9:41 pm
Nice… will do good to replace a feedback page I had setup on my site…
June 8th, 2006 at 9:52 pm
Do you read left to right? Seems like the signs are on opposite sides - and changing that blue to an easier color would be my changes. Otherwise, another variation of the rating system, good idea IMO.
June 8th, 2006 at 10:07 pm
@BillyG - yeah others have mentioned it, we will be releasing a quick updated version very soon.
June 8th, 2006 at 10:26 pm
fooking great
June 8th, 2006 at 10:47 pm
I understand the data will be written on the feedback.txt file but is there any way to read it? By that I mean, what program should I use to display it in a friendly way?
Thanks for this! Kudos.
June 8th, 2006 at 10:50 pm
@Yplson: That will require some editing/programming. What we releaed is just the very base code to store results - you will have to manipulate to make it graphically pleasing.
June 8th, 2006 at 10:53 pm
AhmedF: I know, but I figured it out, Excel! Never mind, I must have sounded real n00b.
June 8th, 2006 at 10:56 pm
“@Jon: I’m not sure what you mean - we have seen several versions of the feedback system - we just created one that was small and focused on one thing (getting quick feedback)”
What don’t you get?
Go to Adobe.com, see the ‘[+]’ thing in the corner of their pages? Click it and you’ll see it has a “Made by opinionlab.com” text somewhere. Opinonlab makes those +/- feedback things that float in the corner of company websites (like what you’re doing). A bunch of companies use it but opinionlab makes it.
Since you practically duplicated the way the opinionlab thing works, I figured you’d mention it in your blog post somewhere.
I’m not trying to attack you–just pointing out that if you mimic the functionality of something, you should reference it so it doesn’t look like you’re stealing.
June 8th, 2006 at 11:00 pm
Yeah - I have seen that, but I have seen various versions of the ‘floating feedback in the bottom right’ idea beyond just what Opinionlab has done. Sure they have may have been inspiration, but I don’t see the concept being so unique that I need to specifically mention them.
Basically saying that others have done the same thing (feedback in the bottom right) that I don’t see the need to credit one single company.
June 8th, 2006 at 11:16 pm
Considering you’ve duplicated the [+] [-] thing with the feedback text under it almost pixel for pixel, I’d have to says it’s definitely ‘inspired’ LOL.
By the way, from browsing the opinionlab site, it looks like they patented the [+] / [-] thing. Just letting you know so you don’t get into legal trouble.
June 8th, 2006 at 11:17 pm
About the patent thing I mentioned, see here:
http://www.opinionlab.com/about_this_system.asp
June 8th, 2006 at 11:19 pm
Oh fantastic - time to look into that. Headaches from just building something simple & useful
June 8th, 2006 at 11:32 pm
“Oh fantastic - time to look into that. Headaches from just building something simple & useful :)”
Yeah no kidding–the whole patent system is messed up. And they have 4 freaking patents on that thing!
With a little tweaking of the graphics and such you should be able to dodge their patents though (I haven’t read their patents and I’m not a lawyer so I’m not sure exactly what would need changing).
June 8th, 2006 at 11:47 pm
awesome
June 9th, 2006 at 12:03 am
Funny, if people don’t like it, then those people must not use it! But the script is good though. It should get updated fast!
June 9th, 2006 at 1:43 am
Works fine for me with FF 1.5.0.4 and Sage.
June 9th, 2006 at 2:07 am
VERY NICE.
June 9th, 2006 at 2:47 am
Doesnt work in Opera9 either,
It gets hidden off the bottom of the screen, and when you scroll down to it, the javascript pushes it furthur under the bottom of the window, etc loop
Just thought i’d mention it.
June 9th, 2006 at 6:08 am
Great job on the script.
I registered with your site, and I did not get an email from you!
I found a fix for a problem with the script.
June 9th, 2006 at 7:02 am
Excellent timing, I was just about to build something similar for a project I am currently working on an ajax “textual feedback” component which act similarly except for the fact that user enters their comments instead of rating.
Your implementation will give me some inspiration.
Thank you.
June 9th, 2006 at 7:19 am
i think the fact that the object moves up and down easily distracts the eye so once a user starts scrolling, distraction will kick in. i am also saying this because a feedback thingy could happily sit in a fixed, positioned (bottom? top right?) layer, no?
June 9th, 2006 at 11:59 am
That’s a cool script and more importantly, a cool idea. I’m gonna put that feedback script in my page too… great work.
June 9th, 2006 at 12:07 pm
Excellent but becarful with the onmouseover. It is anoying when you try to scroll down the page with the conventionnal buttons, to have the feedback window open and need to close it.
June 9th, 2006 at 12:13 pm
Just to note gotten everyone’s feedback - gonna release an update version with the following:
1. Feedback opens open up onclick
2. Includes a hidden field for comment box
3. Increases rating left to right
4. (will try) fade in/out into bottom right instead of scrolling.
@James - sent you an email.
June 10th, 2006 at 8:27 am
What about a Wordpress plugin?
June 10th, 2006 at 10:45 pm
I’m very interested in using this for my new site, but do you have an idea of when you’ll be releasing v2.0 with the features you mentioned above?
June 11th, 2006 at 2:55 pm
@Gary: Hopefully within 48 hours
June 12th, 2006 at 1:20 pm
Yes, WordPress plugin would be nice thing to do! So?
June 12th, 2006 at 2:23 pm
Nice work, just one comment. In addition to your ‘Click here to Close’ link, you should just make it close when a user clicks anywhere else on the screen.
June 12th, 2006 at 4:31 pm
I’ve noticed some things:
feedback.js - line 193:
hardcoded cookie path
The image is in the root folder by default but it should be in /images
I’ll port this as an addition to vBulletin 3.6b1. You’ll be fully credited of course!
June 13th, 2006 at 10:26 pm
ahmed, I really like this. Thanks for sharing. I’ll be using it on my site =)
June 14th, 2006 at 10:52 am
Some news about the new version? I’m evaluating it for a project. thanks in advance
June 14th, 2006 at 12:40 pm
Thanks for the compliments
@Aaron - this was done on purpose. It is now based on a click so the user is definitely interested in interaction
@Dominik - it has been updated
@ftb - just about ready. The fadein is causing a few headaches, otherwise it has been updated. Give me 24 hours
June 14th, 2006 at 4:51 pm
Okay updated.
June 23rd, 2006 at 3:39 pm
I am impressed by the online sample!. I want to include this to my site. But I am running into the following issue.
I unzipped the files to a folder “feedback”. The image “feedback.gif” has been moved to a folder at “feedback\images”.
Strangely when I open up the sample “feedback-test.html” in IE, I am not able to notice the feedback icon at the bottom right corner!?
Any suggestions, do you think I am doing something incorrectlty!?
Thanks.
June 23rd, 2006 at 3:43 pm
My post above got edited automatically and the slash in the second sentence got removed.
The folder where the images reside is “feedbackSLASHimages”.
June 25th, 2006 at 6:07 am
asdfsadf
I am impressed by the online sample!. I want to include this to my site. But I am running into the following issue.
I unzipped the files to a folder “feedback”. The image “feedback.gif” has been moved to a folder at “feedbackimages”.
Strangely when I open up the sample “feedback-test.html” in IE, I am not able to notice the feedback icon at the bottom right corner!?
Any suggestions, do you think I am doing something incorrectlty!?
June 29th, 2006 at 2:24 pm
the demo does not work!!!
June 29th, 2006 at 8:45 pm
@Kish/Ali: The javascript cannot find the image. Give me a link and I will take a look.
@test: Working fine for me - what browser/OS are you using?
June 30th, 2006 at 8:13 am
I get a permission denied on explorer. Any reason why? Also, on firefox, when the feedback is submitted, it opens a new page where the box was.
July 4th, 2006 at 2:14 am
Looks good
July 5th, 2006 at 7:42 am
AhmedF: “The HTML inside the JS was done on purpose - I wanted it very easy to add it to an existing page. Instead of having to copy a chunk of HTML, all you need is that one div. Plus its better bandwidth management - instead of having that HTML on the end of every page, it gets cached with the JS file :)”
Ahmed, that makes it inaccessible to users who may not have javascript enabled or available, or may not be able to access the updated content from the control (e.g. screenreader users). It’s a nice piece of work, but needs some love to make it sing. Surely bandwidth doesn’t trump accessibility?
July 18th, 2006 at 4:32 am
Hi
I have another post, based on your creativity. My post is: Visualizing Traffic At My Blog Via Mapping The Pathways [ http://akbani.blogspot.com/2006/07/visualizing-traffic-at-my-blog-via.html ]
Would appreciate your comments.
July 26th, 2006 at 12:37 am
tight.
July 28th, 2006 at 10:07 pm
great! simple sample make me simply understand.
August 13th, 2006 at 9:38 pm
Very interesting script, tnx u Ahmed
I m going to try it for my website (:
August 24th, 2006 at 9:11 pm
Great Ajax Tool, I love it.
Some constructive criticism:
How does one view the results? possible a results page would be good, so we can see poll averages etc..
Also is there a way to differentiate what results come from what pages?
In the next version maybe posting the page name like blah.ext before all the results in the textfile would work great. That way one can distinguish between page1, page 2, page n… etc
August 25th, 2006 at 1:42 pm
Ryan - the results (and how you deal with it) are basically upto you. The current script uses a PHP script to save the results in a text file. It is simply meant as an example. You can also send the referring page to the script to save (something we have done on iBegin itself).
September 6th, 2006 at 2:57 pm
i can’t download it, can you give me a right url?
October 11th, 2006 at 9:47 am
What if someone wanted NOT to call the script from the body tag, but from the head tag? Would that be possible?
Could something like this help:
http://dean.edwards.name/weblog/2006/06/again/
My aim is to leave the body tag totally clear and call the feedback script from a small snippet inside the head. I tried the above suggestion, but I’m a very very newbie at JS and could be wrong on how to implement this.
Any help would be appreciated…
November 2nd, 2006 at 5:51 am
Thanks for the script.. but its not working properly.. it gives Fshock errors.
And can one stop it scrolling ?
November 2nd, 2006 at 5:53 am
Nice one. Thankyou. I will download it later..
November 2nd, 2006 at 8:15 am
yes i have to agree good job i just downloaded it and will try using it:) thanks again
November 3rd, 2006 at 7:18 pm
great! simple sample make me simply understand.
Greetings
November 8th, 2006 at 9:15 am
can you please make it IE7 compatible ? or show us how to do that ?
November 8th, 2006 at 11:29 pm
IE7 ??? any ideas how can we fix this bug ?
November 12th, 2006 at 12:51 pm
Unfortunate the download is not working, is there another site to download it?
November 17th, 2006 at 1:30 am
@Arzt
Download is OK!
Fix it at your browser.
November 19th, 2006 at 6:06 am
Great job on the script - the download works.
November 21st, 2006 at 11:15 am
Nice script - thanks a lot.
November 21st, 2006 at 2:29 pm
A very helpful and interesting article.
A new ajax-fan
December 10th, 2006 at 10:47 pm
What if someone wanted NOT to call the script from the body tag, but from the head tag? Would that be possible?
December 14th, 2006 at 2:45 am
Yes, i always thought that Ajax is a really future technologie! But it’s difficult to learn, one must explain that, easy simply and clearly. Thanks for perfect comments, “AhmedF”!
December 16th, 2006 at 12:12 am
My aim is to leave the body tag totally clear and call the feedback script from a small snippet inside the head. I tried the above suggestion, but I’m a very very newbie at JS and could be wrong on how to implement this.
January 1st, 2007 at 9:56 pm
thank you for your efforts in 2006, skript works great
so I wish you and all your visitors all the best for 2007 and go on working in that way.
January 11th, 2007 at 2:08 am
nice work!
January 26th, 2007 at 10:10 pm
gre8t job …
but u have an error
February 13th, 2007 at 10:32 am
Thanks for this very good article … I use this to my home work to school … Can I translate this with all comments and insert on my site? … Thanks