💬

Widget para capturar reseñas

En tu aplicación web, puedes incrustar un widget para capturar reseñas en un woku mediante un simple script.

Vídeo del script incrustado en la página web de woku.

I. Instrucciones

1. Incluir Script

Para utilizar el widget, necesitas incluir un script. El enlace lo encuentras a continuación:

Incorpora este enlace en el <head> de tu documento HTML:

<head>
	  <script src="https://widgets.blob.core.windows.net/woku-review/woku-review-widget.es.js"></script>   
</head>

2. Crear un Contenedor para el Widget

En el cuerpo de tu aplicación web, debes tener un <div> con el id="woku-review-widget" donde se montará el widget:

<body>
		<div id="woku-review-widget"></div>
</body>

3. Inicializar el Widget

Para que el widget funcione, debes llamar a la función wokuReviewWidget(wokuId, email). El email es útil en aplicaciones con autenticación de usuario para evitar que ingresen ellos el email. El parámetro email es opcional. Puedes llamar a esta función cuando desees actualizar el widget.

<script>
		window.wokuReviewWidget('667c43b2fa79b80feda179ab', 'example@woku.app');
</script>

II. Ejemplos Completos

Ejemplo 1. Incrustar el widget para capturar una reseña en una aplicación web:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website with Woku Review Widget</title>
    <script src="https://widgets.blob.core.windows.net/woku-review/woku-review-widget.es.js"></script>   
</head>
<body>
    <!-- Div where the widget will be mounted -->
    <div id="woku-review-widget"></div>
    <script>
        window.wokuReviewWidget('667c43b2fa79b80feda179ab');
     </script>
</body>
</html>

Ejemplo 2. Incrustar el widget para capturar una reseña con un email:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website with Woku Review Widget</title> 
    <script src="https://widgets.blob.core.windows.net/woku-review/woku-review-widget.es.js"></script>   
</head>
<body>
    <!-- Div where the widget will be mounted -->
    <div id="woku-review-widget"></div>
    <script>
        window.wokuReviewWidget('667c43b2fa79b80feda179ab', 'example@woku.app');
    </script>
</body>
</html>

Ejemplo 3. Cargar el widget después de que la aplicación se haya montado en el DOM.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Optimized Woku Review Widget Loading</title>
</head>
<body>
		<!-- Div where the widget will be mounted -->
    <div id="woku-review-widget"></div>
    <script>
        document.addEventListener("DOMContentLoaded", function() {

	        var script = document.createElement("script");
	        script.src = "https://widgets.blob.core.windows.net/woku-review/woku-review-widget.es.js";
	        script.async = true;
            
	        script.onload = function() {
		        window.wokuReviewWidget('667c7bd5a86cffab5d5125ed', 'example@woku.app');
	        };

	        document.body.appendChild(script);
        });
    </script>
</body>
</html>

Con estos ejemplos y las instrucciones, deberías poder incrustar y configurar el widget de reseñas de woku en tu aplicación web sin problemas.

Volver a los Recursos 👈

Ir a woku.app 🌐