Подключение виджета
Настройка виджета
...
Подключение виджета
Настройка виджета
В коде для вставки виджета есть несколько параметров, которые влияют на его внешний вид и поведение.
- data-widget-invite-message - сообщение, которое указывается рядом с окошечком виджета, сообщение может показываться когда пользователь закрыл виджет (showOnClose необходимо выставить на true - по умолчанию) или наоборот на false и оно может оставаться в отображении когда пользователь раскрывает виджет (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-user-form - с его помощью вы можете создавать форму для сбора информации, которую клиент должен указать (или может указать) для последующего отображения у оператора. Ниже приведен основной шаблон настройки, а еще ниже приведен работающий код виджета с примером, объединяющим все основные настройки.
Wiki Markup data-widget-user-form='{
...
"message": "Представьтесь, пожалуйста.",
...
"required": true,
...
"submitButton":
...
Unknown macro: { "text"}
...
{ "text": "Отправить" }, "fields":
...
[ { "name": "senderFullName",
...
"label": "Ф.И.О.",
...
"rules":
...
Unknown macro: {"required"}
]
},
{
"name": "senderEmail",
"label": "Email",
"rules": [
Unknown macro: {"required"}
,
Unknown macro: {"type"}
]
},
Unknown macro: { "name"}
...
[ {"required": true, "message": "Пожалуйста, укажите Ф.И.О."} ] }, { "name": "senderEmail", "label": "Email", "rules": [ {"required": true, "message": "Требуется указать почту."}, {"type": "email", "message": "Почта имеет не верный формат."} ] }, { "name": "comment", "label": "Произвольный текст" } ] }'
Пример оформления:
- виджета с отдельно настроенными цветами для сообщений и для кнопок
- виджета, который всегда открыт при открытии страницы
- виджета с формой, в которой есть 2 обязательных к заполнению поля - ФИО и Отделение и кнопка Отправить
- виджета с надписью "Мы на связи!"
- виджета с автоматическим открытием через 5 секунд
Wiki Markup |
---|
<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=' |
...
Unknown macro: { "widgetButtonBackgroundColor"}
...
{ "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": |
...
Unknown macro: { "text"}
...
{ "text": "Отправить" }, "fields": |
...
[ { "name": "senderFullName", |
...
"label": "Ф.И.О.", |
...
"rules": |
...
[ {"required" |
...
: true, "message": "Пожалуйста, укажите ваше Ф.И.О."} ] }, { "name": "Отделение", |
...
"label": "Отделение", |
...
"rules": |
...
Unknown macro: {"required"}
...
[ {"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> |