Подключение виджета
...
В коде для вставки виджета можно добавлять параметры, которые влияют на его внешний вид и поведение.
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" |
...
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 |
Пример кода виджета:
- виджета с отдельно настроенными цветами для сообщений и для кнопок
- виджета, который всегда открыт при открытии страницы
- виджета с формой, в которой есть 2 обязательных к заполнению поля - ФИО и Отделение и кнопка Отправить
- виджета с надписью "Мы на связи!"
- виджета с автоматическим открытием через 5 секунд
- виджета, который отображает имя оператора
- виджета с нестандартной иконкой бота
| Code Block |
|---|
<link href="https://croc-chat.autofaq.ai/widget/static/css/main.css" rel="stylesheet">
<script>
<script data-widget-host="https://croc-chat.autofaq.ai"
window.widgetOperatorName = true;data-widget-service-id="ХХХХХХ-ХХХХ-ХХХХХХ"
window.widgetBotIcon = "https://upload.wikimedia.org/wikipedia/commons/b/b6/Robot-icon.png";
</script>
<scriptdata-widget-visible-by-default="true"
data-widget-new-hostmessages='{"badge"https://croc-chat.autofaq.ai"
data-widget-service-id="ваш service id из кода для вставки"
true, "favicon": true, "notifications": true }'
data-widget-user-login="default"
data-widget-visible-by-default=operator-name = "true"
data-widget-newoperator-messages='{"badge": true, "favicon": true, "notifications": true }'
data-widget-user-login="default"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-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": truefalse, "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> |
Стандартный виджет |
Измененный виджет |
