Могу ли я выполнять свой js код при событиях виджета?

Да, вы можете реагировать на различные события виджета с помощью js. Для этого на панели Код виджета в настройках виджета кликните + Обработка событий. При этом к коду виджета добавится код обработки.

Добавленный код выводит в консоль текст при возникновении различных событий виджета.

Просто замените обработчики событий на свои.

Доступны следующие события:

INITIALIZED происходит при запуске виджета.
RESOURCE_GROUP_OPENED происходит при открытии группы в каталоге. В него передаются параметры name и resourceGroupId.
RESERVATION_STARTED происходит при открытии ресурса для бронирования. В него передаются параметры name и resourceId.
RESERVATION_SAVED происходит при переходе с экрана бронирования на экран заказа. В него передаются параметры name и resourceId.
INDIRECT_ORDER_STARTED происходит при появлении формы оплаты и ожидании платежа.
ORDER_COMPLETED происходит при успешном завершении заказа. Данные события можно сформировать самостоятельно — смотрите ниже. Если этого не сделать, передается объект с минимальными стандартными полями orderNumber, total и deposit.

Генерация собственных данных ORDER_COMPLETED

Вы можете сформировать данные события ORDER_COMPLETED самостоятельно. Для этого перейдите в раздел Триггеры. Создайте автоматический триггер, который запускается, Когда получен заказ от клиента. Добавьте в триггер задачу. Затем добавьте действие Передать данные в JS и введите JSON-шаблон в поле Шаблон данных (JSON), например:

{
    "orderNumber": "[bukza_order_number]",
    "total": [bukza_total],
    "phone": "[bukza_phone]"
}

В шаблон можно вставлять любые параметры заказа.

Вставка кода внутри виджета

У вас может не быть возможности добавить код виджета с обработчиком на свою страницу. Это происходит, когда виджет установлен в соцсетях или вы даете клиентам прямую ссылку на виджет. В таких случаях вы можете запускать свой код прямо внутри виджета из вложенного фрейма.

Для этого выставьте флаг Использовать внутренний фрейм для обработки событий:

Далее у вас есть два пути: разместить код обработки на своем сайте и указать адрес этой страницы или вставить код страницы прямо в виджет.

Первый вариант предпочтительней, так как ваш код будет запускаться с вашего домена и будет иметь доступ к данным пользователя в браузере. Другими словами вы сможете идентифицировать пользователя. Это может быть полезно для систем аналитики.

Второй вариант подойдет, если у вас нет сайта. При этом варианте мы передаем все параметры URL со страницы виджета во внутренний фрейм. Это нужно для того, чтобы, к примеру, обрабатывать UTM метки из прямой ссылки виджета.

Код для внутреннего фрейма

Используйте следующий ниже код во внутреннем фрейме. Он также просто выводит в консоль текст при возникновении события виджета.

<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>

Не нашли ответа на ваш вопрос?
Задайте его нам на

support@bukza.com