cbsmth.se
Blog
About me
Projects
tinyFeedback – Simple visitor feedback
tinyFeedback is now released and maintained as a WordPress plugin!
Future updates will only be implemented in the WordPress plugin version.
tinyFeedback is a simple piece of code that lets you add a minimalistic bar requesting feedback anywhere on your webpage. The appearance (below) is easily configurable through CSS.
Live Example and Download
- tinyFeedback Live Example
- Download tinyFeedback 1.1 (tar.gz, 4Kb)
Dependencies
jQuery
tinyFeedback was developed using the jQuery library due to its simplifying features and attractive effects. In the future the JavaScript part of tinyFeedback might be reworked to exclude this dependency.
The jQuery library can be easily included by adding the following snippet to the <head>-section of your website. (By serving it locally you may however increase loading speeds.)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
PHP
The negative feedback post handling provided in this release is written in PHP. It could with relative ease be ported to ASP.NET or any desired CGI.
Installation
After downloading and unpacking the compressed folder, you will find five files in the directory named tinyFeedback:
- example.html – An elementary demonstration of how the files are to be included.
- readme.txt – Quick information about licencing and a link to this page.
- postFeedback.php – Handles any posts from visitors who selects “No”.
- tinyFeedback.js – Contains the functions that add the feedback functionality to your site.
- tinyFeedback.css – Default appearance, either to be included or added to your existing CSS.
After including jQuery and the tinyFeedback.js-file in the <head>-section of your website and verifying that the path to postFeedback.php therein is correct, you should be able to add the bar by pasting the below snippet in the <head>.
target-here is to be replaced with wherever you want the bar’s container div to be appended. It can be a default HTML-element, such as body, or a container element identified by an id or a class (‘#div-id’ and ‘.class-name’, respectively.)
<script type="text/javascript">
$(function() {
tinyFeedback('target-here');
});
</script>
Configuration
For optional functionality and appearance, I’d recommend you take a few moments to read through the possibilities listed below.
Text and styling
The feedback buttons and form are all styled entirely through the provided stylesheet, meaning there is only one place you need to look at for altering colours, sizes, etc.
Most of the texts are for the moment hard-coded into the .js and .php-files, but they are fairly easy to locate and alter. Simply open the files in your text editor of choice and search for the occurrence.
Google Analytics Tracking
The negative, written feedback will be sent to you by your preferred delivery method (see below), however in order to track the button clicks for both positive and negative feedback, I strongly recommend connecting your website to Google Analytics. It is a powerful tool provided entirely free of charge, which allows you to read deep into your website’s usage statistics.
tinyFeedback has by default a call to the Analytics event tracking function for the feedback buttons.
Positive feedback clicks will by default be categorized under Events as Feedback > Positive > page-url, and negative feedback clicks as Feedback > Negative > page-url. To alter this behavior, look for the two instances of _gaq.push in the tinyFeedback.js-file.
Delivery Methods
Important: The configuration described in this section must be performed in order to receive user feedback.
tinyFeedback offers three different methods for receiving the feedback visitors might choose to provide, namely e-mail, database input or writing to a text-file. You only have to correctly configure the one method you choose to use.
E-mail configuration
In order to use this method, your web server must allow the PHP mail()-function. Furthermore, you must edit the postFeedback.php-file and supply the e-mail address you want the feedback delivered to (the variable $myEmail, line 5). You may also choose to alter the title of the messages.
If you choose to utilize this method, please try sending a few messages when installing tinyFeedback on your website, to make sure that the messages properly reach you and does not end up in a spam filter etc.
Note: The PHP-script contains rudimentary validation in order to prevent the form being utilized for spamming purposes. Be wary however, and please inform me if you notice that the protection has been circumvented.
Database insertion configuration
This method requires slightly more work to be done during installation, namely setting up a database table. As countless tutorials on how to create databases and tables already exist I chose to omit the necessary steps from this post.
If you choose to use this method, do not forget to sanitize your input, lest you risk falling victim to highly damaging injection attacks.
Text file configuration
The third and final option is also the easiest one, however it is rather inflexible as it requires you fetching or otherwise accessing the file to find out if any feedback has been added.
The only requirements to use this option is to create an empty text-file that your web server has privileges to write to. You must also provide the path to this file through the $textFile-variable at line 7 in postFeedback.php.
Note: Make sure that no unauthorized visitors can open the file and read your feedback.
Miscellaneous
Any and all feedback is more than welcome; ironically through the comments-field below rather than tinyFeedback itself.
Changelog
Version 1.1
Added 2011-07-20.
Implemented lightbox display of the negative feedback form. Default appearance rewritten.
Version 1.0
Added 2011-06-28.
[...] cbsmth v7n Mentor Latest Blog:tinyFeedback ? Simple visitor feedback [...]
[...] cbsmth v7n Mentor Latest Blog:tinyFeedback ? Simple visitor feedback [...]