Preguntas frecuentes
arrow_back_ios
¿Puedo ejecutar mi propio código JavaScript en los eventos del widget?
Sí, puedes responder a varios eventos del widget usando JavaScript. Para esto, ve al panel de Código del widget en la configuración del widget y haz clic en el botón + Manejo de eventos. Esto agregará el código del manejador de eventos a tu código del widget.
Este código registra mensajes en la consola cuando ocurren diferentes eventos del widget.
Simplemente reemplaza estos manejadores de eventos con tu propio código según lo necesites.
Los siguientes eventos están disponibles:
- INITIALIZED — Se activa cuando el widget se carga.
- RESOURCE_GROUP_OPENED — Se activa cuando se abre un grupo en el catálogo. Pasa los parámetros name y resourceGroupId.
- RESERVATION_STARTED — Se activa cuando se abre un recurso para reserva. Pasa los parámetros name y resourceId.
- RESERVATION_SAVED — Se activa al pasar de la pantalla de reserva a la pantalla de pedido. Pasa los parámetros name y resourceId.
- INDIRECT_ORDER_STARTED — Se activa cuando aparece el formulario de pago y el pago está pendiente.
- ORDER_COMPLETED — Se activa cuando el pedido se completa correctamente. Pasa los parámetros orderNumber, total y deposit.
Insertar código dentro de un widget
En algunos casos, puede que no puedas agregar el código del widget con un manejador de eventos directamente en tu página. Esto puede suceder si el widget está instalado en redes sociales o si proporcionas a los clientes un enlace directo al widget. En estas situaciones, puedes ejecutar tu código directamente dentro del widget usando un frame interno.
Para esto, activa la casilla Usar un frame interno para manejar callbacks:
Luego, tienes dos opciones: puedes colocar el código de procesamiento en tu propio sitio y especificar la URL de la página, o insertar el Código fuente de la página directamente en el widget.
Se recomienda la primera opción, ya que tu código se ejecutará desde tu propio dominio y tendrá acceso a los datos del usuario en el navegador. Esto te permite identificar al usuario, lo cual puede ser útil para sistemas de analítica.
La segunda opción es adecuada si no tienes un sitio web. En este caso, todos los parámetros de la URL de la página del widget se pasan al frame interno. Esto es necesario, por ejemplo, para procesar etiquetas UTM desde un enlace directo del widget.
Código fuente para el frame interno
Usa el siguiente código en el frame interno. También registra mensajes en la consola cuando ocurre un evento del widget.
<html>
<script>
window.addEventListener('message', function (e) {
if (e && e.origin && e.origin.indexOf('bukza.com') !== -1)
var message = JSON.parse(e.data);
switch (message.event) {
case 'INITIALIZED':
console.log('widget opened');
break;
case 'RESOURCE_GROUP_OPENED':
console.log('entered to group ' + message.data.name);
break;
case 'RESERVATION_STARTED':
console.log('started for ' + message.data.name);
break;
case 'RESERVATION_SAVED':
console.log('saved for ' + message.data.name);
break;
case 'INDIRECT_ORDER_STARTED':
console.log('waiting for payment');
break;
case 'ORDER_COMPLETED':
console.log('order completed #' + message.data.orderNumber);
break;
}
}, false);
</script>
</html>
<script>
window.addEventListener('message', function (e) {
if (e && e.origin && e.origin.indexOf('bukza.com') !== -1)
var message = JSON.parse(e.data);
switch (message.event) {
case 'INITIALIZED':
console.log('widget opened');
break;
case 'RESOURCE_GROUP_OPENED':
console.log('entered to group ' + message.data.name);
break;
case 'RESERVATION_STARTED':
console.log('started for ' + message.data.name);
break;
case 'RESERVATION_SAVED':
console.log('saved for ' + message.data.name);
break;
case 'INDIRECT_ORDER_STARTED':
console.log('waiting for payment');
break;
case 'ORDER_COMPLETED':
console.log('order completed #' + message.data.orderNumber);
break;
}
}, false);
</script>
</html>
