Подключение виджета
Для подключения виджета на любую HTML страницу необходимо:
включить канал виджет в разделе Настройки - Каналы - Widget
скопировать основной код виджета (кнопка Копировать код)
вставить код виджета на HTML страницу
при необходимости добавить в код виджета управляющие параметры (см ниже)
Настройка виджета
В коде для вставки виджета можно добавлять параметры, которые влияют на его внешний вид и поведение.
Передача пользовательских данных в AutoFAQ
data-widget-user-login - логин пользователя
data-widget-user-name - имя пользователя
data-widget-user-email - электронная почта пользователя
data-widget-user-login = "vasya123" data-widget-user-name = "Василий Иванов"
Управление иконкой виджета на странице
data-widget-invite-message - сообщение, которое указывается рядом с кнопкой виджета.
showOnClose - показывать сообщение когда виджет свернут при true, иначе сообщение не отображается
hideOnOpen - скрывать сообщение когда пользователь развернул виджет при установленном true, иначе при разворачивании виджета сообщение продолжает отображаться
data-widget-invite-message= '{ "message": "Мы на связи!", "hideOnOpen": true, "showOnClose": true }'
Управление автораскрытием виджета
data-widget-auto-open - позволяет автоматически раскрывать виджет через заранее заданное время нахождения пользователя на сайте однократно или постоянно.
timer - устанавливает на время через которое будет развернут виджет (по-умолчанию 5 секунд);
once - разворачивать виджет только один раз, если установлено true, или разворачивать виджет при каждом заходе на страницы с виджетом, если установлен false
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 секунды
data-widget-new-messages='{ "badge": true, "favicon": true, "notifications": true }'
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 - сообщение при введенном в поле некорректном значении
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-bot-icon - иконка бота в замен стандартной, если параметр указан, то сообщения бота будут сопровождаться данной иконкой, если параметр не указан - будет использована иконка по-умолчанию
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 - иконка оператора в замен стандартной, если параметр указан, то сообщения оператора будут сопровождаться данной иконкой, если параметр не указан - будет использована иконка по-умолчанию
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 - наименование объекта виджета для программного развертывания и свертывания виджета, после чего командами autofaq.open() и autofaq.close() можно разворачивать и сворачивать виджет
data-widget-api-ns = "autofaq"
Управление внешним видом виджета
data-widget-style-params - блок для указания цвета всех элементов виджета, в примере ниже показаны варианты отображения элементов. Наименование параметров цветов соответствует их назначению. formPanelDisabledButtonBackgroundColor и другие аналогичные отвечают за оформление кнопки на форме сбора информации.
В таблице ниже представлены примеры для установки собственной картинки для фона виджета или цвета фона.
Через атрибуты тега script (Html) | Через глобальную переменную (JavaScript) | |
Свой паттерн | <script data-widget-style-params='{ "messagesBackgroundImageUrl": "https://i.stack.imgur.com/yGOkq.png" }' ... src="...main.js" ></script> | window.widgetStyleParams = { messagesBackgroundImageUrl: "https://i.stack.imgur.com/yGOkq.png" } |
Свой паттерн + настройки паттерна | <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> | window.widgetStyleParams = { messagesBackgroundImageUrl: "https://i.stack.imgur.com/yGOkq.png", messagesBackgroundRepeat: "repeat-y", messagesBackgroundPosition: "50% 50%", messagesBackgroundSize: "contain" } |
Только цвет (затирает предустановленный паттерн) | <script data-widget-style-params='{ "messagesBackground": "lightcyan" }' ... src="...main.js" ></script> | window.widgetStyleParams = { messagesBackground: "lightcyan" } |
Фоновый цвет + прозрачная картинка | <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> | 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" } |
Параметр | Описание |
messagesBackground | соответствует background в css. Если установлен - перекрывает значения по умолчанию, в том числе паттерн. Можно использовать вместо messagesBackgroundColor |
messagesBackgroundColor | устанавливает цвет фона. Не затрагивает текущий паттерн, по этому изменения могут быть не заметны |
messagesBackgroundImageUrl | Устанавливает фоновое изображение. Нужно указать только url изображения |
messagesBackgroundImage | Для background-image в css |
messagesBackgroundRepeat | Для background-repeat в css |
messagesBackgroundPosition | Для background-position в css |
messagesBackgroundSize | Для background-size в css |
Управление размером виджета
data-widget-sizes - блок для управления размерами виджета на странице. Доступные для управления параметры:
resizeable - true/false - возможность пользователю на странице самому изменять размеры виджета с помощью мыши
width - указание в % или целое число - задание ширины виджета
height - указание в % или целое число - задание высоты виджета
minWidth - целое число - задание минимальной ширины виджета
minHeight - целое число - задание минимальной высоты виджета
Через атрибуты тега script (Html) | Через глобальную переменную (JavaScript) |
---|---|
data-widget-sizes = '{ "resizeable": true, "width": "30%", "height": "80%", "minWidth": 400, "minHeight": 300 }' | window.widgetSizes = { "width": "30%", "height": "80%", "minWidth": 400, "minHeight": 300, "resizeable": true } |
Пример кода виджета
“HTML вариант”
виджета с отдельно настроенными цветами для сообщений и для кнопок
виджета, который всегда открыт при открытии страницы
виджета с формой, в которой есть 2 обязательных к заполнению поля - ФИО и Отделение и кнопка Отправить
виджета с надписью "Мы на связи!"
виджета с автоматическим открытием через 5 секунд
виджета, который отображает имя оператора
виджета с нестандартной иконкой бота
<link href="https://croc-chat.autofaq.ai/widget/static/css/main.css" rel="stylesheet"> <script data-widget-host="https://croc-chat.autofaq.ai" data-widget-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-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-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": false, "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>
“Динамический вариант” - конфигурация параметров виджета с помощью javascript:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> const widgetLink = `<link type="text/css" href="https://dockerhosts9941.blob.core.windows.net/widget/mainebz.css" rel="stylesheet" />`; const script = document.createElement('script'); window.widgetHost = 'https://test-chat.autofaq.ai'; script.id = 'autofaqWidget'; script.type = "text/javascript"; script.src = "https://test-chat.autofaq.ai/widget/static/js/main.js"; window.widgetServiceId = 'e7b8997b-48f3-444c-a87d-9d9e56d3dddf'; window.widgetChannelId = '2f7ce72f-8003-4e17-b879-e3c71f239149'; window.widgetNewMessages = {"badge": true, "favicon": true, "notifications": true}; window.widgetUserLogin = 'default'; window.widgetOperatorName = false; window.widgetOperatorIcon = 'https://dockerhosts9941.blob.core.windows.net/widget/operator.png'; window.widgetBotIcon = 'https://dockerhosts9941.blob.core.windows.net/widget/bot.png'; window.widgetStyleParams = { "widgetButtonBackgroundColor": "rgb(255,79,18)", "widgetButtonTextColor": "#FFFFFF", "headerBackgroundColor": "#273A64", "headerTextColor": "#FFFFFF", "messageToWidgetBackgroundColor": "#273A64", "messageToWidgetTextColor": "#FFFFFF", "messageFromWidgetBackgroundColor": "rgb(227,233,236)", "messageFromWidgetTextColor": "#000000", "messagesButtonBackgroundColor": "#979799", "messagesButtonTextColor": "#FFFFFF", "messagesButtonHoverBackgroundColor": "#E3E8EC", "messagesButtonHoverTextColor": "#000000", "messagesOperatorFullNameTextColor": "#101828", "messagesOperatorTimeTextColor": "#979799", "messagesBackgroundImageUrl": "https://dockerhosts9941.blob.core.windows.net/widget/background.png", "messagesBackgroundRepeat": "repeat-y", "messagesBackgroundSize": "auto" }; window.widgetIniteMessage = false; window.widgetInviteMessage = {"message": "Готов помочь!", "hideOnOpen": true, "showOnClose": true}; window.widgetUserPayload = {"key": "value"}; $('head').append(widgetLink, script); </script>
Стандартный виджет | Измененный виджет |