Plugin de Feedback con JavaScript y PHP

A veces cuando se lanza una web es interesante que los visitantes nos den feedback de los errores y mejoras en la usabilidad del sitio, por eso hoy vamos a usar un plugin de feedback con JavaScript y PHP.

Nos descargaremos el plugin de feedback, mediante bower o a mano, desde https://github.com/ivoviz/feedback.

Lo que hará index.php es lanzar el plugin y enviar la información en el proceso de feedback. Además, si hay datos en sesión los mostrará. Esos datos se guardarán en sesión para hacer este ejemplo, pero lo lógico y normal seria enviarlos por correo electrónico al administrador de la web.

<?php session_start(); ?>
<!DOCTYPE HTML>
<html lang="es">
	<head>
		<meta charset="UTF-8" />
		<title>Plugin de Feedback en Javascript</title>
		<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	    <script src="feedbackjs/stable/2.0/feedback.js"></script>
	    <link rel="stylesheet" href="feedbackjs/stable/2.0/feedback.min.css" />
            <script type="text/javascript">
	     $(document).ready(function() {
              // Invocamos al plugin y le decimos a que url enviar los datos
                $.feedback({
                    ajaxURL: 'listen.php',
                    html2canvasURL: 'feedbackjs/stable/2.0/html2canvas.min.js',
                    initButtonText: "Enviar Feedback",
                    tpl: { 
                         // Podemos traducir los textos que muestra el plugin
		     }
                });
            });      
	   </script>
	</head>
	<body>
		<h1>Estamos haciendo pruebas con un plugin de feedback</h1>
		<h2>Es un plugin útil para implementar un proceso de feedback</h2>
		<?php if(isset($_SESSION["data"])){ ?>
			<p>Feedback enviado anteriormente:</p>	
			<p><?php 
			$data=json_decode($_SESSION["data"]);
			var_dump($data); ?></p>
			<p>	
				Captura:<br/>
				<img src="<?php echo $data->img ?>"/>
			</p>
		<?php } ?>
		<p>&copy; victorroblesweb.es</p>
	</body>
</html>

listen.php guardará los datos en sesión.

<?php
session_start();
$_SESSION['data'] = $_POST['feedback'];
echo 1;
?>

El resultado seria este:

Le damos click a «Enviar feedback»:

Plugin de feedback en Javascript y PHP

Resaltamos u ocultamos lo que queramos:

Plugin de feedback en Javascript y PHP highlight

Introducimos la descripción del problema:

Plugin de feedback en Javascript y PHP description

Actualizamos la página y tenemos todos los datos que nos da el plugin y nos muestra la imagen en base64:

Plugin de feedback en Javascript y PHP imagen

Eso es todo.

Victor

Autor: Victor

Desarrollador web - Formador online - Blogger

Compartir este post

1 Comentario

  1. Excelente aporte, muchas gracias. Justo lo que necesito para un proyecto en el que estoy trabajando.

    Responder

Poner un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *