...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
Для подключения виджета на любую HTML страницу необходимо:
- включить канал виджет в разделе Настройки - Каналы - Widget
- скопировать основной код виджета (кнопка Копировать код)
- вставить код виджета на HTML страницу
- при необходимости добавить в код виджета управляющие параметры (см ниже)
Настройка виджета
В коде для вставки виджета можно добавлять параметры, которые влияют на его внешний вид и поведение.
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-user-form='{
"message": "Представьтесь, пожалуйста.",
"required": true,
"submitButton": {
"text": "Отправить"
},
"fields": [
{
"name": "senderFullName",
"label": "Ф.И.О.",
"rules": [
{"required": true, "message": "Пожалуйста, укажите Ф.И.О."}
]
},
{
"name": "senderEmail",
"label": "Email",
"rules": [
{"required": false, "message": "Укажите почту, пожалуйста"},
{"type": "email", "message": "Указан некорректный почтовый адрес."}
]
}
]
}' |
data-widget-bot-name - отображаемое имя бота, если параметр указан, то его содержимое заменяет собой имя, указанное в настройке Имя оператора в UI настроек виджета.
data-widget-operator-name - отображаемое имя оператора, возможные варианты:
- "true" - отображаемое имя будет взято из настроек пользователя,
- "false" - отображаемое имя оператора будет взято из настройки Имя оператора в UI настроек виджета
- "произвольное имя" - отображаемое имя оператора будет взято из указанной строки
- если поле не указано - отображаемое имя оператора будет взято из настройки Имя оператора в UI настроек виджета
data-widget-operator-icon - иконка оператора в замен стандартной, если параметр указан, то сообщения оператора будут сопровождаться данной иконкой, если параметр не указан - будет использована иконка по-умолчанию
data-widget-bot-icon - иконка бота в замен стандартной, если параметр указан, то сообщения бота будут сопровождаться данной иконкой, если параметр не указан - будет использована иконка по-умолчанию
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" |
data-widget-style-params - блок для указания цвета всех элементов виджета, в примере ниже показаны варианты отображения элементов. Наименование параметров цветов соответствует их назначению. formPanelDisabledButtonBackgroundColor и другие аналогичные отвечают за оформление кнопки на форме сбора информации.
В таблице ниже представлены примеры для установки собственной картинки для фона виджета или цвета фона.
...
Code Block | ||
---|---|---|
| ||
window.widgetStyleParams = {
messagesBackgroundImageUrl: "https://i.stack.imgur.com/yGOkq.png"
} |
Code Block | ||
---|---|---|
| ||
<script
data-widget-style-params='{
"messagesBackgroundImageUrl": "https://i.stack.imgur.com/yGOkq.png"
}'
...
src="...main.js"
></script> |
...
Code Block | ||
---|---|---|
| ||
window.widgetStyleParams = {
messagesBackgroundImageUrl: "https://i.stack.imgur.com/yGOkq.png",
messagesBackgroundRepeat: "repeat-y",
messagesBackgroundPosition: "50% 50%",
messagesBackgroundSize: "contain"
} |
Code Block | ||
---|---|---|
| ||
<script
data-widget-style-params='{
"messagesBackgroundImageUrl": "https://i.stack.imgur.com/yGOkq.png"
"messagesBackgroundRepeat": "repeat-y",
"messagesBackgroundPosition": "50% 50%",
"messagesBackgroundSize": "contain"
}'
...
src="...main.js"
></script> |
...
Code Block | ||
---|---|---|
| ||
window.widgetStyleParams = {
messagesBackground: "lightcyan"
} |
Code Block | ||
---|---|---|
| ||
<script
data-widget-style-params='{
"messagesBackground": "lightcyan"
}'
...
src="...main.js"
></script> |
...
Code Block | ||
---|---|---|
| ||
window.widgetStyleParams = {
messagesBackgroundColor: "#aaeeff",
messagesBackgroundImageUrl: "https://cdn.pixabay.com/photo/2018/04/02/07/56/grass-3283193_960_720.png",
messagesBackgroundRepeat: "no-repeat",
messagesBackgroundPosition: "50% 100%",
messagesBackgroundSize: "auto"
} |
Code Block | ||
---|---|---|
| ||
<script
data-widget-style-params='{
"messagesBackgroundColor": "#aaeeff",
"messagesBackgroundImageUrl": "https://cdn.pixabay.com/photo/2018/04/02/07/56/grass-3283193_960_720.png",
"messagesBackgroundRepeat": "no-repeat",
"messagesBackgroundPosition": "50% 100%",
"messagesBackgroundSize": "auto"
}'
...
src="...main.js"
></script> |
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
Пример кода виджета:
- виджета с отдельно настроенными цветами для сообщений и для кнопок
- виджета, который всегда открыт при открытии страницы
- виджета с формой, в которой есть 2 обязательных к заполнению поля - ФИО и Отделение и кнопка Отправить
- виджета с надписью "Мы на связи!"
- виджета с автоматическим открытием через 5 секунд
- виджета, который отображает имя оператора
- виджета с нестандартной иконкой бота
...
Table of Contents |
---|
Подключение виджета
Для подключения виджета на любую HTML страницу необходимо:
Включить канал виджет в разделе Настройки - Каналы - Widget
Указать название нового канала в AutoFAQ и название, отображаемое в заголовке виджета
Скопировать основной код виджета (кнопка Копировать код)
Вставить код виджета на HTML страницу
При необходимости добавить в код виджета управляющие параметры (см ниже)
Настройка виджета
В коде для вставки виджета можно добавлять параметры, которые влияют на его внешний вид и поведение.
Передача основных пользовательских данных в AutoFAQ
data-widget-user-login - логин пользователя
data-widget-user-name - имя пользователя
data-widget-user-email - электронная почта пользователя
data-widget-user-phone - телефон пользователя
Code Block | ||
---|---|---|
| ||
data-widget-user-login = "vasya123"
data-widget-user-name = "Василий Иванов" |
Передача дополнительных пользовательских данных в AutoFAQ
Для каждого пользователя в AutoFAQ могут быть переданы любые произвольные данные в формате key: value
Основной способ - через указание значения переменной data-widget-user-payload
в теле вызова скрипта виджета:
Code Block | ||
---|---|---|
| ||
<link href="https://chat.autofaq.ai/widget/static/css/main.css" rel="stylesheet">
<script data-widget-host="https://chat.autofaq.ai"
data-widget-service-id="ecdeхх-хххх-хххх-хххххх"
data-widget-channel-id="97e0хх-хххх-хххх-хххххх"
data-widget-user-payload = '{
"user_height": "183",
"user_hair":"blond"
}'
src="https://chat.autofaq.ai/widget/static/js/main.js"
id="autofaqWidget"></script> |
Переданные в AutoFAQ данные о пользователе могут быть использованы в сценариях, а так же отобразятся в боковой панели оператора:
Альтернативный способ передачи даполнительных переменных - через объект window.widgetUserPayload
вне тела вызова скрипта, а просто в коде страницы:
Code Block | ||
---|---|---|
| ||
<link href="https://chat.autofaq.ai/widget/static/css/main.css" rel="stylesheet">
<script>
window.widgetUserPayload = {"user_height": "192", "user_hair": "green"}
</script>
<script data-widget-host="https://chat.autofaq.ai"
data-widget-service-id="ecdeхх-хххх-хххх-хххххх"
data-widget-channel-id="97e0хх-хххх-хххх-хххххх"
src="https://chat.autofaq.ai/widget/static/js/main.js"
id="autofaqWidget"></script> |
Управление иконкой виджета на странице
data-widget-invite-message - сообщение, которое указывается рядом с кнопкой виджета.
showOnClose - показывать сообщение когда виджет свернут при true, иначе сообщение не отображается
hideOnOpen - скрывать сообщение когда пользователь развернул виджет при установленном true, иначе при разворачивании виджета сообщение продолжает отображаться
Code Block |
---|
data-widget-invite-message= '{
"message": "Мы на связи!",
"hideOnOpen": true,
"showOnClose": true
}' |
Управление возможностью свернуть виджет
data-widget-hide-close - параметр, который отключает кнопку закрытия виджета.
true - убрать крестик в верхнем углу виджета, который закрывает виджет
все остальные значения или отсуствие параметра - показывать крестик
Code Block |
---|
data-widget-hide-close = 'true' |
или
Code Block |
---|
window.widgetHideClose = true |
Управление автораскрытием виджета
data-widget-auto-open - позволяет автоматически раскрывать виджет через заранее заданное время нахождения пользователя на сайте однократно или постоянно.
timer - устанавливает на время через которое будет развернут виджет (по-умолчанию 5 секунд);
once - разворачивать виджет только один раз, если установлено true, или разворачивать виджет при каждом заходе на страницы с виджетом, если установлен false
Code Block data-widget-auto-open='{ "timer": 5, "once": false }'
data-widget-auto-start-connection - позволяет автоматически устанавливать сокет соединение с сервером, подгружать историю диалога без необходимости раскрытия виджета. Не рекомендуется устанавливать данный параметр на высоконагруженных сервисах, на сайты которых могут зайти 5000 пользователей и более в час, поскольку это увеличит нагрузку на систему.
true - автоматически устанавливает соединение, без раскрытия виджета
Code Block |
---|
data-widget-auto-start-connection = 'true' |
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": {
"icon": "/favicon.ico",
"timeout": 60000,
"title": "New message"
}
}' |
Форма для сбора данных
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-user-form='{
"message": "Представьтесь, пожалуйста.",
"required": true,
"submitButton": {
"text": "Отправить"
},
"fields": [
{
"name": "senderFullName",
"label": "Ф.И.О.",
"rules": [
{"required": true, "message": "Пожалуйста, укажите Ф.И.О."}
]
},
{
"name": "senderEmail",
"label": "Email",
"rules": [
{"required": false, "message": "Укажите почту, пожалуйста"},
{"type": "email", "message": "Указан некорректный почтовый адрес."}
]
}
]
}' |
Поле с выпадающим списком
После ввода первого символа автоматически срабатывает фильтрация и оставляет только те значения, в которых есть введенный символ.
minSearch - кол-во введенных символом, после которого будет открыт список всех найденных значений (0 - открывать сразу при клике на поле).
Code Block |
---|
data-widget-user-form='{ "message": "Выберите значение", "required": true, "submitButton": { "text": "Отправить" }, "fields": [ { "name": "Значение", "minSearch": 0, "type": "select", "options": [ "Значение 1", "Значение 2", |
...
|
...
"Значение |
...
Х" |
...
], " |
...
label": " |
...
Список", " |
...
rules": |
...
[ |
...
|
...
{ |
...
|
...
|
...
|
...
" |
...
required": |
...
true, |
...
" |
...
message": " |
...
Пожалуйста, укажите значение." |
...
|
...
|
...
} |
...
] |
...
} |
...
]
}' |
Управление именем и иконкой бота
data-widget-bot-name - отображаемое имя бота, если параметр не указан, то его содержимое заменяет собой имя, указанное в настройке Имя оператора в UI настроек виджета.
data-widget-bot-icon - иконка бота в замен стандартной, если параметр указан, то сообщения бота будут сопровождаться данной иконкой, если параметр не указан - будет использована иконка по-умолчанию
Code Block |
---|
data-widget-bot-name = "Автоответчик"
data-widget-bot-icon = "https://upload.wikimedia.org/wikipedia/commons/b/b6/Robot-icon.png" |
Управление именем и иконкой оператора
data-widget-operator-name - отображаемое имя оператора, возможные варианты:
"true" - отображаемое имя будет взято из настроек пользователя,
"false" - отображаемое имя оператора будет взято из настройки Имя оператора в UI настроек виджета
"произвольное имя" - отображаемое имя оператора будет взято из указанной строки
если поле не указано - отображаемое имя оператора будет взято из настройки Имя оператора в UI настроек виджета
data-widget-operator-icon - иконка оператора в замен стандартной, если параметр указан, то сообщения оператора будут сопровождаться данной иконкой, если параметр не указан - будет использована иконка по-умолчанию
Code Block |
---|
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-api-ns - наименование объекта виджета.
Code Block | ||
---|---|---|
| ||
data-widget-api-ns = "autofaq" |
Доступные методы:
autofaq.open() - развернуть виджет
autofaq.close() - свернуть виджет
autofaq.sendMessage({text: "Привет"}) - отправить сообщение от лица пользователя
autofaq.logout() - сбросить текущего пользователь с историей переписки
Перед использованием метода необходимо дождаться инициализации виджета на странице.
Пример кода для ожидания:
Code Block | ||
---|---|---|
| ||
let intervalId = setInterval(() => { if (window.autofaq && autofaq.sendMessage) { clearInterval(intervalId); |
...
window.autofaq.sendMessage({text: " |
...
Привет" |
...
}); |
...
}
}, 50) |
Управление внешним видом виджета
data-widget-style-params - блок для указания цвета всех элементов виджета, в примере ниже показаны варианты отображения элементов. Наименование параметров цветов соответствует их назначению. formPanelDisabledButtonBackgroundColor и другие аналогичные отвечают за оформление кнопки на форме сбора информации.
В таблице ниже представлены примеры для установки собственной картинки для фона виджета или цвета фона.
Через атрибуты тега script (Html) | Через глобальную переменную (JavaScript) | |||||||||||
Свой паттерн |
|
| ||||||||||
Свой паттерн + настройки паттерна |
|
| ||||||||||
Только цвет (затирает предустановленный паттерн) |
|
...
|
...
|
...
|
...
|
| ||||||
Фоновый цвет + прозрачная картинка |
|
...
|
...
|
...
|
...
|
...
|
|
...
|
...
|
...
Стандартный виджет
...
|
Параметр | Описание |
messagesBackground | соответствует background в css. Если установлен - перекрывает значения по умолчанию, в том числе паттерн. Можно использовать вместо messagesBackgroundColor |
messagesBackgroundColor | устанавливает цвет фона. Не затрагивает текущий паттерн, по этому изменения могут быть не заметны |
messagesBackgroundImageUrl | Устанавливает фоновое изображение. Нужно указать только url изображения |
messagesBackgroundImage | Для background-image в css |
messagesBackgroundRepeat | Для background-repeat в css |
messagesBackgroundPosition | Для background-position в css |
messagesBackgroundSize | Для background-size в css |
messagesOutdatedButtonBackgroundColor | устанавливает цвет неактивных кнопок |
messagesOutdatedButtonTextColor | устанавливает цвет текста неактивных кнопок |
widgetButtonBackgroundColor | устанавливает цвет фона иконки виджета |
Управление размером виджета
data-widget-sizes - блок для управления размерами виджета на странице. Доступные для управления параметры:
resizeable - true/false - возможность пользователю на странице самому изменять размеры виджета с помощью мыши
width - указание в % или целое число - задание ширины виджета
height - указание в % или целое число - задание высоты виджета
minWidth - целое число - задание минимальной ширины виджета
minHeight - целое число - задание минимальной высоты виджета
Через атрибуты тега script (Html) | Через глобальную переменную (JavaScript) | |||||||
---|---|---|---|---|---|---|---|---|
|
|
Google analytics и Яндекс метрики
Отправляемые события:
"AUTOFAQ_OPEN_DIALOG" - открытие виджета
"AUTOFAQ_CLOSE_DIALOG" - закрытие виджета
"AUTOFAQ_USER_SEND_MESSAGE" - пользователь написал сообщение
"AUTOFAQ_USER_UPDATE_INFO" - обновление информации о пользователе. Например заполнена форма.
Expand | ||
---|---|---|
| ||
Для настройки по мимо вставки самого кода счетчика необходимо в виджет передать его номер через параметр data-widget-ymid="00000000". И добавить "Цели" в Яндекс метриках |
Expand | ||
---|---|---|
| ||
Дополнительных настроек не требуется. Достаточно вставить на страницу уже готовый код "Глобальный тег (gtag.js)" из раздела "Сведения о веб-потоке" |
Пример кода виджета
Expand | |||||
---|---|---|---|---|---|
| |||||
|
Expand | |||||
---|---|---|---|---|---|
| |||||
|
Стандартный виджет | Измененный виджет |
Переопределение стилей
Для внесение визуальных изменений в виджет, например, изменение радиуса скругления краев окна виджета, необходимо переопределить стиль для блока.
Изменение радиуса скругления краев:
Code Block | ||
---|---|---|
| ||
<style>
.chat21-sheet{
border: 2px solid CornflowerBlue;
border-radius: 50px !important;
}
</style> |
Разворачивание списка каналов
В виджете есть возможность настройки и показа списка доступных каналов помимо виджета.
Пока для встраивания доступны каналы следующих типов:
виджет (включен всегда, убрать нельзя)
ВКонтакте
Telegram
Whatsapp
Viber
Можно расставить их в том порядке как вы хотите, чтобы они отображались у пользователей.
Для включения этой опции нужно зайти в канал Виджет и в блоке Настройка списка каналов в виджете
включить эту опцию (1). При нажатии на кнопку Добавить канал в список
(2) появляется блок с настройкой канала. В выпадающем списке отображаются названия активных каналов доступных типов.
При клике на иконки каналов WhatsApp, Telegram и Viber с компьютера пользователь видит окошко с кнопкой подключения и QR кодом для сканирования телефоном - это позволит открыть канал на телефоне. При нажатии на кнопку подключения открываются ссылки вида:
https://t.me/<имя_бота_телеграмм>
- для Telegramhttps://wa.me/7999541234
- для WhatsApphttps://vk.me/club1134567
- для VKviber://pa/info?uri=<имя_бота_вайбер>
- для Viber
QR кода также содержат эти ссылки и позволяют открыть ссылку сразу на телефоне.
При открытии виджета на телефоне клик на иконке канала сразу открывает ссылку без отображения окошек.
Все текстовки задаются администратором в настройках подключения каналов к виджету.
Для каждого из дополнительных каналов можно указать:
название, которая отображается в заголовке окошка;
общую текстовку, которая отображается на самом верху окошка;
текст над кнопкой подключения;
текст над QR кодом.
Info |
---|
Важно! Для каждого подключаемого канала в список нужно заполнить новое поле в этом канале - Название группы (Telegram, VK, Viber) или номер телефона (для WhatsApp) |
Виртуальная клавиатура
Параметр data-widget-enable-virtual-keyboard позволяет включить отображение виртуальной клавиатуры в интерфейсе виджета
Code Block | ||
---|---|---|
| ||
data-widget-enable-virtual-keyboard="true" |
Сброс сессии пользователя
Для сброса сессии пользователя в виджете на стороне портала можно вызвать команду
Code Block |
---|
autofaq.logout() |
После того виджет будет переоткрыт уже с новым пользователем.