Подключение виджета
...
В коде для вставки виджета можно добавлять несколько параметров, которые влияют на его внешний вид и поведение.
- 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 и другие аналогичные отвечают за оформление кнопки на форме сбора информации.
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 секунд
| Code Block |
|---|
<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="ваш 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"
}'
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> |