Подключение виджета
...
В коде для вставки виджета можно добавлять несколько параметров, которые влияют на его внешний вид и поведение.
- 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 и другие аналогичные отвечают за оформление кнопки на форме сбора информации.
В таблице ниже представлены примеры для установки собственной картинки для фона виджета или цвета фона.
| Через глобальную переменную (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 |
data-widget-new-messages - оповещения пользователей виджета:
push-уведомления в браузере (если разрешены);
цифры-иконки на вкладке;
цифра-иконка на свернутом виджете.
На данный момент функциональность работает в браузерах Chrome, Yandex.Browser. Нужно в код виджета на странице добавить:
data-widget-new-messages='{"badge": true, "favicon": true, "notifications": true }'
При необходимости настройки времени всплывающего десктопного push-уведомления для клиента, необходимо добавить в строку время timeout в миллисекундах (по умолчанию, стоит 3 секунды). 60000 миллисекунд - 1 минута.
data-widget-new-messages='{"badge": true, "favicon": true, "notifications": {"timeout": 60000}}'- data-widget-user-form - с его помощью вы можете создавать форму для сбора информации, которую клиент должен указать (или может указать) для последующего отображения у оператора. Ниже приведен основной шаблон настройки, а еще ниже приведен работающий код виджета с примером, объединяющим все основные настройки.
| 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": true, "message": "Требуется указать почту."},
{"type": "email", "message": "Почта имеет не верный формат."}
]
},
{
"name": "comment",
"label": "Произвольный текст"
}
]
}' |
Пример оформления:
- виджета с отдельно настроенными цветами для сообщений и для кнопок
- виджета, который всегда открыт при открытии страницы
- виджета с формой, в которой есть 2 обязательных к заполнению поля - ФИО и Отделение и кнопка Отправить
- виджета с надписью "Мы на связи!"
- виджета с автоматическим открытием через 5 секунд
- смена иконок оператора и бота, смена отображаемого имени для оператора и бота.
Если вы не хотите, чтобы в виджете при ответе оператора отображалось имя этого оператора или просто была информация, что сейчас разговаривает оператор, а не бот, тогда никакие дальнейшие настройки вносить в виджет не надо. Далее будут описаны примеры как сделать, чтобы пользователь понимал, что он общается с оператором.
| Название параметра | Описание | Примеры |
|---|---|---|
| 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 из кода для вставки"id="ваш service id из кода для вставки" data-widget-visible-by-default="true" data-widget-new-messages='{"badge": true, "favicon": true, "notifications": true }' data-widget-visibleuser-by-defaultlogin="truedefault" data-widget-newstyle-messagesparams='{"badge": true, "favicon": true, "notifications": true }' "widgetButtonBackgroundColor": "rgb(255,133,4)", "widgetButtonTextColor": "#fff", data-widget-user-login="default""headerBackgroundColor": "rgb(255,133,4)", data-widget-style-params='{"headerTextColor": "#ffffff", "widgetButtonBackgroundColormessageToWidgetBackgroundColor": "rgb(255,133,4)", "widgetButtonTextColormessageToWidgetTextColor": "#fff#ffffff", "headerBackgroundColormessageFromWidgetBackgroundColor": "rgb(255,133,4)#f7f7f7", "headerTextColormessageFromWidgetTextColor": "#ffffff#000000", "messageToWidgetBackgroundColormessagesButtonBackgroundColor": "rgb(255,133,4)#90ee90", "messageToWidgetTextColormessagesButtonTextColor": "#ffffff#000000", "messageFromWidgetBackgroundColormessagesButtonHoverBackgroundColor": "#f7f7f7#fffff", "messageFromWidgetTextColormessagesButtonHoverTextColor": "#000000", "messagesButtonBackgroundColormessagesOperatorFullNameTextColor": "#90ee90#666", "messagesButtonTextColormessagesOperatorTimeTextColor": "#000000#aaaaaa", "formPanelBorderColor"messagesButtonHoverBackgroundColor": "#fffff: "rgb(255,133,4)", "messagesButtonHoverTextColorformPanelDisabledButtonBackgroundColor": "#000000#999", "messagesOperatorFullNameTextColorformPanelDisabledButtonBorderColor": "#666#999", "messagesOperatorTimeTextColorformPanelDisabledButtonColor": "#aaaaaa#fff", "formPanelBorderColorformPanelSubmitButtonBackgroundColor": "rgb(255,133,4)", "formPanelDisabledButtonBackgroundColorformPanelSubmitButtonBorderColor": "#999rgb(255,133,4)", "formPanelDisabledButtonBorderColorformPanelSubmitButtonTextColor": "#999#fff", "formPanelDisabledButtonColorformPanelSubmitButtonHoverBackgroundColor": "#fffrgba(255,133,5,0.75)", "formPanelSubmitButtonBackgroundColorformPanelSubmitButtonHoverBorderColor": "rgb(255,133,45)", "formPanelSubmitButtonBorderColorformPanelSubmitButtonHoverTextColor": "rgb(255,133,4)#fff", "formPanelSubmitButtonTextColormessagesBackgroundImageUrl": "#fffhttps://image.freepik.com/free-vector/memphis-pattern-background_53876-85418.jpg", "formPanelSubmitButtonHoverBackgroundColormessagesBackgroundRepeat": "rgba(255,133,5,0.75)repeat-y", "formPanelSubmitButtonHoverBorderColormessagesBackgroundPosition": "rgb(255,133,5)50% 100%", "formPanelSubmitButtonHoverTextColormessagesBackgroundSize": "#fffauto" }' 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> |