arrow_back_iosQuestions
help

Can I execute my js code on widget events?

check_circle
Yes, you can react to various widget events using js. To do this, on the Code tab in the widget settings, set the Add code for handling widget callbacks checkbox. This will add the handler code to the code of the widget.
This code logs text to the console when various widget events occur.
Just replace these event handlers with your own code.
The following events are available:
  • INITIALIZED occurs when the widget is started.
  • RESOURCE_GROUP_OPENED occurs when you open a group in the catalog. It passes the parameters name and resourceGroupId.
  • RESERVATION_STARTED occurs when you open a resource for booking. The name and resourceId parameters are passed to it.
  • RESERVATION_SAVED occurs when you go from the reservation screen to the order screen. The name and resourceId parameters are passed to it.
  • INDIRECT_ORDER_STARTED occurs when the payment form appears and the payment is pending.
  • ORDER_COMPLETED occurs when the order is successfully completed. Parameters orderNumber, total and deposit are passed to it.

Inserting code inside a widget

You may not be able to add the widget code with a handler to your page. This happens when the widget is installed in social networks or you give customers a direct link to the widget. In such cases, you can run your code directly inside the widget from a nested frame.
To do this, set the checkbox Use an internal frame to handle callbacks:
Next, you have two ways: place the processing code on your site and specify the Page URL or insert the Page source code directly into the widget.
The first option is preferable, since your code will be executed from your domain and will have access to user data in the browser. In other words, you can identify the user. This can be useful for different Analytics systems.
The second option is suitable if you don't have a website. In this case, we pass all URL parameters from the widget page to the internal frame. This is necessary in order e.g. to process UTM tags from a direct widget link.

Source code for the internal frame

Use the code below in the internal frame. It also outputs text to the console when a widget event occurs.
<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>
Didn't find the answer to your question?
Ask it to us on
mail_outline support@bukza.com