Подключение виджета
Для подключения виджета на любую HTML страницу необходимо:
- включить канал виджет в разделе Настройки - Каналы - Widget
- скопировать основной код виджета (кнопка Копировать код)
- вставить код виджета на HTML страницу
- при необходимости добавить в код виджета управляющие праметры (см ниже)
Настройка виджета
В коде для вставки виджета можно добавлять несколько параметров, которые влияют на его внешний вид и поведение.
- data-widget-invite-message - сообщение, которое указывается рядом с кнопкой виджета. Сообщение может показываться когда виджет закрыт при значении параметра showOnClose = true (установлено по умолчанию), сообщение будет скрыто в том случае когда пользователь раскрыл виджет при значении параметра hideOnOpen = true (установлено по умолчанию).
data-widget-invite-message='{
"message": "Мы на связи!",
"hideOnOpen": true,
"showOnClose": true
}' - data-widget-auto-open - позволяет автоматически раскрывать виджет через заранее заданное время нахождения пользователя на сайте (timer - 5 секунд и указание, работает 1 раз для конкретного пользователя или каждый раз на новой странице повторяется)
data-widget-auto-open='{
"timer": 5,
"once": false
}' - дополнительно, реализована функция для программного открытия / закрытия виджета через вызов с сайта, для этого в код виджета необходимо добавить
data-widget-api-ns = "AutoFAQ"; - определяет в какой глобальной переменной будет лежать API виджета
в дальнейшем, можно будет обращаться, например AutoFAQ.open(); или AutoFAQ.close(); для свертывания / развертывания виджета - 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> |
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
data-widget-new-messages - оповещения пользователей виджета:
push-уведомления в браузере (если разрешены);
цифры-иконки на вкладке;
цифра-иконка на свернутом виджете.
На данный момент функциональность работает в браузерах Chrome, Yandex.Browser. Нужно в код виджета на странице добавить:
data-widget-new-messages='{"badge": true, "favicon": true, "notifications": true }'
...
Подключение виджета
Для подключения виджета на любую 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 - будет использовано единое имя пользователя, заданного в настройках виджета
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"; - определяет в какой глобальной переменной будет лежать API виджета
в дальнейшем, можно будет обращаться, например AutoFAQ.open(); или AutoFAQ.close(); для свертывания / развертывания виджета
- data-widget-style-params - здесь вы указываете цвета для всех элементов интерфейса виджета, в примере ниже показаны варианты отображения элементов. Наименование параметров цветов соответствует их назначению. formPanelDisabledButtonBackgroundColor и другие аналогичные отвечают за оформление кнопки на форме сбора информации.
В таблице ниже представлены примеры для установки собственной картинки для фона виджета или цвета фона.
Через глобальную переменную (JavaScript) | Через атрибуты тега script (Html) | |||||||||||
Свой паттерн |
|
| ||||||||||
Свой паттерн + настройки паттерна |
|
| ||||||||||
Только цвет (затирает предустановленный паттерн) |
|
| ||||||||||
Фоновый цвет + прозрачная картинка |
|
|
Параметр | описание |
messagesBackground | соответствуетbackgroundв css. Если установлен - перекрывает значения по умолчанию, в том числе паттерн. Можно использовать вместо messagesBackgroundColor |
messagesBackgroundColor | устанавливает цвет фона. Не затрагивает текущий паттерн, по этому изменеия могут быть не заметны |
messagesBackgroundImageUrl | Устанвливает фоновое изображение. Нужно указать только url изображения |
messagesBackgroundImage | Для background-image в css |
messagesBackgroundRepeat | Для background-repeat в css |
messagesBackgroundPosition | Для background-position в css |
messagesBackgroundSize | Для background-size в css |
- смена иконок оператора и бота, смена отображаемого имени для оператора и бота.
Если вы не хотите, чтобы в виджете при ответе оператора отображалось имя этого оператора или просто была информация, что сейчас разговаривает оператор, а не бот, тогда никакие дальнейшие настройки вносить в виджет не надо. Далее будут описаны примеры как сделать, чтобы пользователь понимал, что он общается с оператором.
Название параметра | Описание | Примеры |
---|---|---|
widgetBotName | отображаемое имя бота. Если заполнено - заменяет заменяет widgetBotName из админки. | window.widgetBotName = "Bot AutoFAQ"; |
widgetOperatorName | отображаемое имя оператора. Если строка - заменяет название оператора. Если Если true - берет название из данных с сервера (если сервер не прислал то будет AutoFAQ operator). Во всех остальных случаях выводится то же значение что и для бота | window.widgetOperatorName = true; |
widgetOperatorIcon | иконка оператора. Если не установлена, то используется иконка по умолчанию. | window.widgetOperatorIcon = "https://cdn.pixabay.com/photo/2014/04/02/10/14/support-303213_960_720.png"; |
widgetBotIcon | иконка бота. Если не установлена, то используется иконка по умолчанию. | window.widgetBotIcon = "https://upload.wikimedia.org/wikipedia/commons/b/b6/Robot-icon.png"; |
Пример оформления:
- виджета с отдельно настроенными цветами для сообщений и для кнопок
- виджета, который всегда открыт при открытии страницы
- виджета с формой, в которой есть 2 обязательных к заполнению поля - ФИО и Отделение и кнопка Отправить
- виджета с надписью "Мы на связи!"
- виджета с автоматическим открытием через 5 секунд
- виджета, который отображает имя оператора
- виджета с нестандартной иконкой бота
Code Block |
---|
<link href="https://croc-chat.autofaq.ai/widget/static/css/main.css" rel="stylesheet"> <script> window.widgetOperatorName = true; window.widgetBotIcon = "https://upload.wikimedia.org/wikipedia/commons/b/b6/Robot-icon.png"; </script> <script data-widget-host="https://croc-chat.autofaq.ai" data-widget-service-id="ваш service id из кода для вставки" data-widget-visible-by-default="true" data-widget-new-messages='{"badge": true, "favicon": true, "notifications": true }' data-widget-user-login="default" data-widget-style-params='{ "widgetButtonBackgroundColor": "rgb(255,133,4)", "widgetButtonTextColor": "#fff", "headerBackgroundColor": "rgb(255,133,4)", "headerTextColor": "#ffffff", "messageToWidgetBackgroundColor": "rgb(255,133,4)", "messageToWidgetTextColor": "#ffffff", "messageFromWidgetBackgroundColor": "#f7f7f7", "messageFromWidgetTextColor": "#000000", "messagesButtonBackgroundColor": "#90ee90", "messagesButtonTextColor": "#000000", "messagesButtonHoverBackgroundColor": "#fffff", "messagesButtonHoverTextColor": "#000000", "messagesOperatorFullNameTextColor": "#666", "messagesOperatorTimeTextColor": "#aaaaaa", "formPanelBorderColor": "rgb(255,133,4)", "formPanelDisabledButtonBackgroundColor": "#999", "formPanelDisabledButtonBorderColor": "#999", "formPanelDisabledButtonColor": "#fff", "formPanelSubmitButtonBackgroundColor": "rgb(255,133,4)", "formPanelSubmitButtonBorderColor": "rgb(255,133,4)", "formPanelSubmitButtonTextColor": "#fff", "formPanelSubmitButtonHoverBackgroundColor": "rgba(255,133,5,0.75)", "formPanelSubmitButtonHoverBorderColor": "rgb(255,133,5)", "formPanelSubmitButtonHoverTextColor": "#fff", "messagesBackgroundImageUrl": "https://image.freepik.com/free-vector/memphis-pattern-background_53876-85418.jpg", "messagesBackgroundRepeat": "repeat-y", "messagesBackgroundPosition": "50% 100%", "messagesBackgroundSize": "auto" }' data-widget-user-form='{ "message": "Здравствуйте, я Абсолютныйваш помощник, представьтесь, пожалуйста.", "required": true, "submitButton": { "text": "Отправить" }, "fields": [ { "name": "senderFullName", "label": "Ф.И.О.", "rules": [ {"required": true, "message": "Пожалуйста, укажите ваше Ф.И.О."} ] }, { "name": "Отделение", "label": "Отделение", "rules": [ {"required": true, "message": "Пожалуйста, укажите ваше отделение"} ] } ] }' data-widget-auto-open='{ "timer": 5, "once": true }' data-widget-invite-message='{ "message": "Мы на связи!", "hideOnOpen": true, "showOnClose": true }' src="https://croc-chat.autofaq.ai/widget/static/js/main.js" id="autofaqWidget"></script> |
Стандартный виджет | Измененный виджет |