Подключение виджета
Настройка виджета
В коде для вставки виджета есть несколько параметров, которые влияют на его внешний вид и поведение.
- 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 - с его помощью вы можете создавать форму для сбора информации, которую клиент должен указать (или может указать) для последующего отображения у оператора. Ниже приведен основной шаблон настройки, а еще ниже приведен работающий код виджета с примером, объединяющим все основные настройки.
data-widget-user-form='
Unknown macro: { "message"}'
Пример оформления:
- виджета с отдельно настроенными цветами для сообщений и для кнопок
- виджета, который всегда открыт при открытии страницы
- виджета с формой, в которой есть 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="ваш service id из кода для вставки"
data-widget-visible-by-default="true"
data-widget-user-login="default"
data-widget-style-params='
'
data-widget-user-form='
'
data-widget-auto-open='
'
data-widget-invite-message='
'
src="https://croc-chat.autofaq.ai/widget/static/js/main.js"
id="autofaqWidget"></script>