Подключение виджета
Настройка виджета
В коде для вставки виджета есть несколько параметров, которые влияют на его внешний вид и поведение.
- data-widget-style-params - здесь вы указываете цвета для всех элементов интерфейса виджета, в примере ниже показаны варианты отображения элементов. Наименование параметров цветов соответствует их назначению. formPanelDisabledButtonBackgroundColor и другие аналогичные отвечают за оформление кнопки на форме сбора информации.
- data-widget-user-form - с его помощью вы можете создавать форму для сбора информации, которую клиент должен указать (или может указать) для последующего отображения у оператора. Ниже приведен основной шаблон настройки, а еще ниже приведен работающий код виджета с примером, объединяющим все основные настройки.
data-widget-user-form='{
"message": "Представьтесь, пожалуйста.",
"required": true,
"submitButton":
,
"fields": [
{
"name": "senderFullName",
"label": "Ф.И.О.",
"rules": [
]
},
{
"name": "senderEmail",
"label": "Email",
"rules": [
,
]
},
]
}'
Пример оформления:
- виджета с отдельно настроенными цветами для сообщений и для кнопок
- виджета, который всегда открыт при открытии страницы
- виджета с формой, в которой есть 2 обязательных к заполнению поля - ФИО и Отделение и кнопка Отправить
<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-user-login="default"
data-widget-style-params='
'
data-widget-user-form='{
"message": "Здравствуйте, я Абсолютный помощник, представьтесь, пожалуйста.",
"required": true,
"submitButton":
,
"fields": [
{
"name": "senderFullName",
"label": "Ф.И.О.",
"rules": [
]
},
{
"name": "Отделение",
"label": "Отделение",
"rules": [
]
}
]
}'
src="https://croc-chat.autofaq.ai/widget/static/js/main.js"
id="autofaqWidget"></script>