Подключение виджета

Для подключения виджета на любую HTML страницу необходимо:

1. Включить канал виджет в разделе Настройки - Каналы - Widget

2. Указать название нового канала в AutoFAQ и название, отображаемое в заголовке виджета

3. Скопировать основной код виджета (кнопка Копировать код)

4. Вставить код виджета на HTML страницу

5. При необходимости добавить в код виджета управляющие параметры (см ниже) 

Настройка виджета

В коде для вставки виджета можно добавлять параметры, которые влияют на его внешний вид и поведение.

Передача основных пользовательских данных в AutoFAQ

data-widget-user-login - логин пользователя
data-widget-user-name - имя пользователя 
data-widget-user-email - электронная почта пользователя
data-widget-user-phone - телефон пользователя

Передача дополнительных пользовательских данных в AutoFAQ

Для каждого пользователя в AutoFAQ могут быть переданы любые произвольные данные в формате key: value

Основной способ - через указание значения переменной data-widget-user-payload в теле вызова скрипта виджета:

Переданные в AutoFAQ данные о пользователе могут быть использованы в сценариях, а так же отобразятся в боковой панели оператора:

Open

Альтернативный способ передачи даполнительных переменных - через объект window.widgetUserPayload вне тела вызова скрипта, а просто в коде страницы:

Управление иконкой виджета на странице

data-widget-invite-message - сообщение, которое указывается рядом с кнопкой виджета.

• showOnClose - показывать сообщение когда виджет свернут при true, иначе сообщение не отображается 

• hideOnOpen - скрывать сообщение когда пользователь развернул виджет при установленном true, иначе при разворачивании виджета сообщение продолжает отображаться 

Управление возможностью свернуть виджет

data-widget-hide-close - параметр, который отключает кнопку закрытия виджета.

• true - убрать крестик в верхнем углу виджета, который закрывает виджет 

• все остальные значения или отсуствие параметра - показывать крестик

или

Управление автораскрытием виджета

data-widget-auto-open - позволяет автоматически раскрывать виджет через заранее заданное время нахождения пользователя на сайте однократно или постоянно.

• timer - устанавливает на время через которое будет развернут виджет (по-умолчанию 5 секунд);

• once - разворачивать виджет только один раз, если установлено true, или разворачивать виджет при каждом заходе на страницы с виджетом, если установлен false

data-widget-auto-start-connection - позволяет автоматически устанавливать сокет соединение с сервером, подгружать историю диалога без необходимости раскрытия виджета. Не рекомендуется устанавливать данный параметр на высоконагруженных сервисах, на сайты которых могут зайти 5000 пользователей и более в час, поскольку это увеличит нагрузку на систему.

• true - автоматически устанавливает соединение, без раскрытия виджета

• false - дефолтное значение, для установки соединения, необходимо раскрытие виджета

Оповещение пользователя о новых сообщениях

data-widget-new-messages - оповещения пользователей виджета при поступлении в него сообщения от бота или оператора, уведомление отображается как push-уведомления в браузере (если разрешены уведомления на данной web странице), иконка на ярлыке вкладки браузера с указанием числа сообщений и иконка на кнопке свернутого виджета с указанием числа сообщений. На данный момент функциональность работает в браузерах Chrome, Yandex.Browser. 

• badge - отображать иконку на кнопке виджета, если установлено true

• favicon - отображать иконку на вкладке браузера, если установлено true

• notifications - отображать всплывающие уведомления в браузере, если установлено true

• timeout - время отображения всплывающего уведомления в миллисекундах, не обязательно, по-умолчанию 3 секунды

Форма для сбора данных

data-widget-user-form - отображать форму для сбора информации. Ниже приведен основной шаблон настройки.

• message - текст сообщения, предваряющего появление формы

• required - в форме обязательно необходимо нажать Отправить, перед тем как появится возможность написать в виджет если установлено true, иначе форму можно проигнорировать и начать переписку

• submitButton - поле настройки кнопки Отправить, состоит из полей:

  • text - название кнопки Отправить

• fields - блок со списком полей для сбора информации, для каждого поля необходимо указать следующие параметры:

  • name - название переменной, в которую будет передана введенная в данном поле информация, если указать senderFullName, senderEmail или senderPhone то значения будут переданы в системные поля клиента ФИО, почта и телефон соответственно

  • label - название поля, отображается на форме в виджете

  • rules - правила заполнения поля, которые состоят из:

    • required - поле обязательно должно быть заполнено для отправки формы если установлено true, иначе данное поле можно оставить пустым

    • message - сообщение, которое выведет форма, если при отправке оставить обязательное поле пустым 

    • type - тип поля, для последующей проверки корректности заполнения, возможны варианты email, url, date, integer

    • message - сообщение при введенном в поле некорректном значении 

Поле с выпадающим списком

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

minSearch - кол-во введенных символом, после которого будет открыт список всех найденных значений (0 - открывать сразу при клике на поле).

Управление именем и иконкой бота

data-widget-bot-name - отображаемое имя бота, если параметр не указан, то его содержимое заменяет собой имя, указанное в настройке Имя оператора в UI настроек виджета.

data-widget-bot-icon - иконка бота в замен стандартной, если параметр указан, то сообщения бота будут сопровождаться данной иконкой, если параметр не указан - будет использована иконка по-умолчанию

Управление именем и иконкой оператора

data-widget-operator-name - отображаемое имя оператора, возможные варианты:

• "true" - отображаемое имя будет взято из настроек пользователя,

• "false" - отображаемое имя оператора будет взято из настройки Имя оператора в UI настроек виджета

• "произвольное имя" - отображаемое имя оператора будет взято из указанной строки 

• если поле не указано - отображаемое имя оператора будет взято из настройки Имя оператора в UI настроек виджета

data-widget-operator-icon - иконка оператора в замен стандартной, если параметр указан, то сообщения оператора будут сопровождаться данной иконкой, если параметр не указан - будет использована иконка по-умолчанию

Управление виджетом из кода страницы

data-widget-api-ns - наименование объекта виджета.

Доступные методы:

• autofaq.open() - развернуть виджет

• autofaq.close() - свернуть виджет

• autofaq.sendMessage({text: "Привет"}) - отправить сообщение от лица пользователя

• autofaq.logout() - сбросить текущего пользователь с историей переписки

Управление внешним видом виджета

data-widget-style-params - блок для указания цвета всех элементов виджета, в примере ниже показаны варианты отображения элементов. Наименование параметров цветов соответствует их назначению. formPanelDisabledButtonBackgroundColor и другие аналогичные отвечают за оформление кнопки на форме сбора информации.

В таблице ниже представлены примеры для установки собственной картинки для фона виджета или цвета фона.

Управление размером виджета

data-widget-sizes - блок для управления размерами виджета на странице. Доступные для управления параметры:

• resizeable - true/false - возможность пользователю на странице самому изменять размеры виджета с помощью мыши

• width - указание в % или целое число - задание ширины виджета

• height - указание в % или целое число - задание высоты виджета

• minWidth - целое число - задание минимальной ширины виджета

• minHeight - целое число - задание минимальной высоты виджета

Google analytics и Яндекс метрики

Отправляемые события:

• "AUTOFAQ_OPEN_DIALOG" - открытие виджета

• "AUTOFAQ_CLOSE_DIALOG" - закрытие виджета

• "AUTOFAQ_USER_SEND_MESSAGE" - пользователь написал сообщение

• "AUTOFAQ_USER_UPDATE_INFO" - обновление информации о пользователе. Например заполнена форма.

Яндекс метрики

Для настройки по мимо вставки самого кода счетчика необходимо в виджет передать его номер через параметр data-widget-ymid="00000000". И добавить "Цели" в Яндекс метриках

Open

Пример кода виджета

Переопределение стилей

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

Изменение радиуса скругления краев:

Разворачивание списка каналов

В виджете есть возможность настройки и показа списка доступных каналов помимо виджета.

Пока для встраивания доступны каналы следующих типов:

• виджет (включен всегда, убрать нельзя)

• ВКонтакте

• Telegram

• Whatsapp

• Viber

Можно расставить их в том порядке как вы хотите, чтобы они отображались у пользователей.

Для включения этой опции нужно зайти в канал Виджет и в блоке Настройка списка каналов в виджете включить эту опцию (1). При нажатии на кнопку Добавить канал в список (2) появляется блок с настройкой канала. В выпадающем списке отображаются названия активных каналов доступных типов.

При клике на иконки каналов WhatsApp, Telegram и Viber с компьютера пользователь видит окошко с кнопкой подключения и QR кодом для сканирования телефоном - это позволит открыть канал на телефоне. При нажатии на кнопку подключения открываются ссылки вида:

• https://t.me/<имя_бота_телеграмм> - для Telegram

• https://wa.me/7999541234 - для WhatsApp

• https://vk.me/club1134567 - для VK

• viber://pa/info?uri=<имя_бота_вайбер> - для Viber

QR кода также содержат эти ссылки и позволяют открыть ссылку сразу на телефоне.

При открытии виджета на телефоне клик на иконке канала сразу открывает ссылку без отображения окошек.

Все текстовки задаются администратором в настройках подключения каналов к виджету.

Для каждого из дополнительных каналов можно указать:

• название, которая отображается в заголовке окошка;

• общую текстовку, которая отображается на самом верху окошка;

• текст над кнопкой подключения;

• текст над QR кодом.

Виртуальная клавиатура

Параметр data-widget-enable-virtual-keyboard позволяет включить отображение виртуальной клавиатуры в интерфейсе виджета

Сброс сессии пользователя

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

После того виджет будет переоткрыт уже с новым пользователем.