Delegate в WEB

Функциональность работает с версии widget 4.3.0

Чтобы использовать описанный функционал, для установки widget.js должна использоваться одна из следующих ссылок:

https://cdn.uxfeedback.ru/X.X.X/widget.js, где X.X.X — номер версии большей, чем 4.3.0

https://cdn.uxfeedback.ru/widget.js

В документации приведены описания кастомных событий, которые генерирует скрипт UX Feedback в процессе своей работы на сайте.

Событие об инициализации скрипта

Название событие — uxsReady

Срабатывает в момент полной загрузки файлов скрипта и инициализации всех необходимых для корректной работы сущностей.

Пример использования:

document.addEventListener('uxsReady', () => window.UXS.sendEvent('eventName'))

Событие показа формы

Название события — uxs/showForm

Передаваемые данные:

event.detail = { 
  campaignId: number - id показанной кампании,
  eventName?: string - название события, по которому была вызвана кампания (опционально)
}

Срабатывает в момент монтирования элементов формы в DOM

Пример использования:

document.addEventListener('uxs/showForm', (event) => {
  const { campaignId, eventName } = event.detail;
  
  // your custom code
})

Событие закрытия формы

Название события — uxs/closeForm

Передаваемые данные:

event.detail = {
  campaignId: number,     // id показанного опроса
  formFinished: boolean,  // флаг полного прохождения формы.
                          
                          true — форма была закрыта на странице конечного типа 
                          (способ закрытия не имеет значения),
                          
                          false — форма была закрыта до достижения страницы
                          конечного типа (способ закрытия не имеет значения)
  
  url?: string,           // url, на который был совершён переход 
                          из формы по логике перехода (опционально)
                          
  // Кроме перечисленных полей, в event.detail приходят ответы пользователя 
     на вопросы. Каждый ответ — отдельное поле вида fieldId: value, где:
  
  fieldId — уникальный идентификатор поля, на которое был дан ответ
            (отображается в личном кабинете при включённой опции показа ID)
  value   — значение, которое пользователь оставил в форме
            (array | string | number)

  // Ответы попадают в event.detail только после нажатия кнопки «Отправить».
     Если опрос многостраничный и пройден не до конца, formFinished будет false, 
     а в event.detail окажутся ответы только с тех страниц, где пользователь 
     нажал кнопку «Отправить».
}

Срабатывает в момент начала процесса закрытия формы (способ закрытия не имеет значения)

Пример использования:

document.addEventListener('uxs/closeForm', (event) => {
  const {
  campaignId,
  formFinished,
  url,
  ...rest
  } = event.detail;
  // answerOnField = rest['7GUk-1UW'];
  // your custom code
})

Примеры использования: реакция на конкретный ответ

Чтобы реагировать на ответ на конкретный вопрос, обратитесь к нему по id вопроса. Идентификатор можно увидеть в карточке вопроса в личном кабинете после отметки чекбокса «Показывать ID блока и вариантов ответа».

document.addEventListener('uxs/closeForm', (event) => {
  const { campaignId, formFinished, url, ...answers } = event.detail;

  // Рейтинговый блок: значение — число
  const rating = answers['<id_рейтингового_вопроса>'];
  if (rating !== undefined && rating <= 2) {
    // например, открыть чат с поддержкой
  }

  // Чекбоксы: значение — массив id выбранных вариантов
  const interests = answers['<id_вопроса_с_чекбоксами>'];
  if (Array.isArray(interests) && interests.includes('<id_варианта>')) {
    // например, отправить событие в аналитику
  }

  // Координация с другими виджетами на сайте:
  // дождаться закрытия нашей формы, прежде чем показывать другие сервисы
  // (попап с подпиской, чат поддержки и т.п.) — чтобы они не перекрывали
  // друг друга.
  if (formFinished) {
    // например, разрешить показ следующего виджета на сайте
  }
});

Пример реального объекта event.detail:

{
 campaignId: 1,
 formFinished: true,
 Gh0t2XKE: 8, 
 Ti65DWin: "ответ на поле комментарий",
 sU3FzP9m: ["ei91VsP7"],
 oa30dsFT: "i31wlNA2"
}