Подключение виджета
Для подключения виджета на любую HTML страницу необходимо:
...
В коде для вставки виджета можно добавлять параметры, которые влияют на его внешний вид и поведение.
Передача пользовательских данных в AutoFAQ
data-widget-user-login - логин пользователя
data-widget-user-name - имя пользователя
data-widget-user-email - электронная почта пользователя
Code Block |
---|
data-widget-user-login = "vasya123"
data-widget-user-name = "Василий Иванов" |
data-widget-invite-message - сообщение, которое указывается рядом с кнопкой виджета.
- showOnClose - показывать сообщение когда виджет свернут при true, иначе сообщение не отображается
- hideOnOpen - скрывать сообщение когда пользователь развернул виджет при установленном true, иначе при разворачивании виджета сообщение продолжает отображаться
Code Block |
---|
data-widget-invite-message= '{ "message": "Мы на связи!", "hideOnOpen": true, "showOnClose": true }' |
data-widget-auto-open - позволяет автоматически раскрывать виджет через заранее заданное время нахождения пользователя на сайте однократно или постоянно.
timer - устанавливает на время через которое будет развернут виджет (по-умолчанию 5 секунд);
once - разворачивать виджет только один раз если установлено true, или разворачивать виджет при каждом заходе на страницы с виджетов если установлен false
Code Block data-widget-auto-open='{ "timer": 5, "once": false }'
data-widget-new-messages - оповещения пользователей виджета при поступлении в него сообщения от бота или оператора, уведомление отображается как push-уведомления в браузере (если разрешены уведомления на данной web странице), иконка на ярлыке вкладки браузера с указанием числа сообщений и иконка на кнопке свернутого виджета с указанием числа сообщений. На данный момент функциональность работает в браузерах Chrome, Yandex.Browser.
- badge - отображать иконку на кнопке виджета, если установлено true
- favicon - отображать иконку на вкладке браузера, если установлено true
- notifications - отображать всплывающие уведомления в браузере, если установлено true
- timeout - время отображения всплывающего уведомления в миллисекундах, не обязательно, по-умолчанию 3 секунды
Code Block |
---|
data-widget-new-messages='{ "badge": true, "favicon": true, "notifications": true }' |
Code Block |
---|
data-widget-new-messages='{ "badge": true, "favicon": true, "notifications": { "timeout": 60000 } }' |
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 - сообщение при введенном в поле некорректном значении
...
Code Block |
---|
data-widget-bot-name = "Автоответчик" data-widget-operator-name = "true" data-widget-operator-icon = "https://cdn.pixabay.com/photo/2014/04/02/10/14/support-303213_960_720.png" data-widget-bot-icon = "https://upload.wikimedia.org/wikipedia/commons/b/b6/Robot-icon.png" |
data-widget-api-ns - наименование объекта виджета для программного развертывания и свертывания виджета, после чего командами autofaq.open() и autofaq.close() можно разворачивать и сворачивать виджет
Code Block |
---|
data-widget-api-ns = "autofaq" |
...