Can I run custom JavaScript code on widget events?

Yes, you can respond to various widget events using JavaScript. To do this, go to the Widget code panel in the widget settings and click the + Events handling button. This will add the event handler code to your widget code.

This code logs messages to the console when different widget events occur.

Simply replace these event handlers with your own code as needed.

The following events are available:

INITIALIZED — Triggered when the widget is loaded.
RESOURCE_GROUP_OPENED — Triggered when a group is opened in the catalog. Passes the parameters name and resourceGroupId.
RESERVATION_STARTED — Triggered when a resource is opened for booking. Passes the parameters name and resourceId.
RESERVATION_SAVED — Triggered when moving from the reservation screen to the order screen. Passes the parameters name and resourceId.
INDIRECT_ORDER_STARTED — Triggered when the payment form appears and payment is pending.
ORDER_COMPLETED — Triggered when the order is successfully completed. Passes the parameters orderNumber, total, and deposit.

Inserting code inside a widget

In some cases, you may not be able to add the widget code with an event handler directly to your page. This can happen if the widget is installed on social networks or if you provide customers with a direct link to the widget. In such situations, you can run your code directly inside the widget using an internal frame.

To do this, enable the checkbox Use an internal frame to handle callbacks:

Next, you have two options: either place the processing code on your own site and specify the Page URL, or insert the Page source code directly into the widget.

The first option is recommended, as your code will run from your own domain and have access to user data in the browser. This allows you to identify the user, which can be useful for analytics systems.

The second option is suitable if you do not have a website. In this case, all URL parameters from the widget page are passed to the internal frame. This is necessary, for example, 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 logs messages 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>