View Source

Подключение виджета

Для подключения виджета на любую HTML страницу необходимо:

включить канал виджет в разделе Настройки - Каналы - Widget
скопировать основной код виджета (кнопка Копировать код)
вставить код виджета на HTML страницу
при необходимости добавить в код виджета управляющие параметры (см ниже)

Настройка виджета

В коде для вставки виджета можно добавлять параметры, которые влияют на его внешний вид и поведение.

Передача пользовательских данных в AutoFAQ

data-widget-user-login - логин пользователя
data-widget-user-name - имя пользователя
data-widget-user-email - электронная почта пользователя

data-widget-user-login = "vasya123"
data-widget-user-name = "Василий Иванов"

data-widget-invite-message - сообщение, которое указывается рядом с кнопкой виджета.

showOnClose - показывать сообщение когда виджет свернут при true, иначе сообщение не отображается
hideOnOpen - скрывать сообщение когда пользователь развернул виджет при установленном true, иначе при разворачивании виджета сообщение продолжает отображаться

data-widget-invite-message= '{
	"message": "Мы на связи!",
	"hideOnOpen": true,
	"showOnClose": true
}'

data-widget-auto-open - позволяет автоматически раскрывать виджет через заранее заданное время нахождения пользователя на сайте однократно или постоянно.

timer - устанавливает на время через которое будет развернут виджет (по-умолчанию 5 секунд);
once - разворачивать виджет только один раз если установлено true, или разворачивать виджет при каждом заходе на страницы с виджетов если установлен false
data-widget-auto-open='{ "timer": 5, "once": false }'

data-widget-new-messages - оповещения пользователей виджета при поступлении в него сообщения от бота или оператора, уведомление отображается как push-уведомления в браузере (если разрешены уведомления на данной web странице), иконка на ярлыке вкладки браузера с указанием числа сообщений и иконка на кнопке свернутого виджета с указанием числа сообщений. На данный момент функциональность работает в браузерах Chrome, Yandex.Browser.

badge - отображать иконку на кнопке виджета, если установлено true
favicon - отображать иконку на вкладке браузера, если установлено true
notifications - отображать всплывающие уведомления в браузере, если установлено true
timeout - время отображения всплывающего уведомления в миллисекундах, не обязательно, по-умолчанию 3 секунды

data-widget-new-messages='{
	"badge": true, 
	"favicon": true, 
	"notifications": true
}'

data-widget-new-messages='{
	"badge": true, 
	"favicon": true, 
	"notifications": {
		"timeout": 60000
	}
}'

data-widget-user-form - отображать форму для сбора информации. Ниже приведен основной шаблон настройки.

message - текст сообщения, предваряющего появление формы
required - в форме обязательно необходимо нажать Отправить, перед тем как появится возможность написать в виджет если установлено true, иначе форму можно проигнорировать и начать переписку
submitButton - поле настройки кнопки Отправить, состоит из полей:
- text - название кнопки Отправить
fields - блок со списком полей для сбора информации, для каждого поля необходимо указать следующие параметры:
- name - название переменной, в которую будет передана введенная в данном поле информация, если указать senderFullName, senderEmail или senderPhone то значения будут переданы в системные поля клиента ФИО, почта и телефон соответственно
- label - название поля, отображается на форме в виджете
- rules - правила заполнения поля, которые состоят из:
  - required - поле обязательно должно быть заполнено для отправки формы если установлено true, иначе данное поле можно оставить пустым
  - message - сообщение, которое выведет форма, если при отправке оставить обязательное поле пустым
  - type - тип поля, для последующей проверки корректности заполнения, возможны варианты email, url, date, integer
  - message - сообщение при введенном в поле некорректном значении

data-widget-user-form='{
            "message": "Представьтесь, пожалуйста.",
            "required": true,
			"submitButton": {
                "text": "Отправить"
            },
            "fields": [
                {
                    "name": "senderFullName",
                    "label": "Ф.И.О.",
                    "rules": [
                        {"required": true, "message": "Пожалуйста, укажите Ф.И.О."}
                    ]
                },
                {
                    "name": "senderEmail",
                    "label": "Email",
                    "rules": [
                        {"required": false, "message": "Укажите почту, пожалуйста"},
                        {"type": "email", "message": "Указан некорректный почтовый адрес."}
                    ]
                }
            ]
        }'

data-widget-bot-name - отображаемое имя бота, если параметр указан, то его содержимое заменяет собой имя, указанное в настройке Имя оператора в UI настроек виджета.

data-widget-operator-name - отображаемое имя оператора, возможные варианты:

"true" - отображаемое имя будет взято из настроек пользователя,
"false" - отображаемое имя оператора будет взято из настройки Имя оператора в UI настроек виджета
"произвольное имя" - отображаемое имя оператора будет взято из указанной строки
если поле не указано - отображаемое имя оператора будет взято из настройки Имя оператора в UI настроек виджета

data-widget-operator-icon - иконка оператора в замен стандартной, если параметр указан, то сообщения оператора будут сопровождаться данной иконкой, если параметр не указан - будет использована иконка по-умолчанию

data-widget-bot-icon - иконка бота в замен стандартной, если параметр указан, то сообщения бота будут сопровождаться данной иконкой, если параметр не указан - будет использована иконка по-умолчанию

data-widget-bot-name = "Автоответчик"
data-widget-operator-name = "true"
data-widget-operator-icon = "https://cdn.pixabay.com/photo/2014/04/02/10/14/support-303213_960_720.png"
data-widget-bot-icon = "https://upload.wikimedia.org/wikipedia/commons/b/b6/Robot-icon.png"

data-widget-api-ns - наименование объекта виджета для программного развертывания и свертывания виджета, после чего командами autofaq.open() и autofaq.close() можно разворачивать и сворачивать виджет

data-widget-api-ns = "autofaq"

data-widget-style-params - блок для указания цвета всех элементов виджета, в примере ниже показаны варианты отображения элементов. Наименование параметров цветов соответствует их назначению. formPanelDisabledButtonBackgroundColor и другие аналогичные отвечают за оформление кнопки на форме сбора информации.

В таблице ниже представлены примеры для установки собственной картинки для фона виджета или цвета фона.

Через глобальную переменную (JavaScript)

Через атрибуты тега script (Html)

Свой паттерн

window.widgetStyleParams = {
    messagesBackgroundImageUrl: "https://i.stack.imgur.com/yGOkq.png"
  }

<script
data-widget-style-params='{
  "messagesBackgroundImageUrl": "https://i.stack.imgur.com/yGOkq.png"
}'
...
src="...main.js"
></script>

Свой паттерн + настройки паттерна

window.widgetStyleParams = {
    messagesBackgroundImageUrl: "https://i.stack.imgur.com/yGOkq.png",
    messagesBackgroundRepeat: "repeat-y",
    messagesBackgroundPosition: "50% 50%",
    messagesBackgroundSize: "contain"
}

<script
data-widget-style-params='{
  "messagesBackgroundImageUrl": "https://i.stack.imgur.com/yGOkq.png"
  "messagesBackgroundRepeat": "repeat-y",
  "messagesBackgroundPosition": "50% 50%",
  "messagesBackgroundSize": "contain"
}'
...
src="...main.js"
></script>

Только цвет (затирает предустановленный паттерн)

window.widgetStyleParams = {
    messagesBackground: "lightcyan"
}

<script
data-widget-style-params='{
  "messagesBackground": "lightcyan"
}'
...
src="...main.js"
></script>

Фоновый цвет + прозрачная картинка

window.widgetStyleParams = {
    messagesBackgroundColor: "#aaeeff",
    messagesBackgroundImageUrl: "https://cdn.pixabay.com/photo/2018/04/02/07/56/grass-3283193_960_720.png",
    messagesBackgroundRepeat: "no-repeat",
    messagesBackgroundPosition: "50% 100%",
    messagesBackgroundSize: "auto"
}

<script
data-widget-style-params='{
    "messagesBackgroundColor": "#aaeeff",
    "messagesBackgroundImageUrl": "https://cdn.pixabay.com/photo/2018/04/02/07/56/grass-3283193_960_720.png",
    "messagesBackgroundRepeat": "no-repeat",
    "messagesBackgroundPosition": "50% 100%",
    "messagesBackgroundSize": "auto"
}'
...
src="...main.js"
></script>

Параметр	описание
messagesBackground	соответствует backgroundв css. Если установлен - перекрывает значения по умолчанию, в том числе паттерн. Можно использовать вместо messagesBackgroundColor
messagesBackgroundColor	устанавливает цвет фона. Не затрагивает текущий паттерн, по этому изменения могут быть не заметны
messagesBackgroundImageUrl	Устанавливает фоновое изображение. Нужно указать только url изображения
messagesBackgroundImage	Для background-image в css
messagesBackgroundRepeat	Для background-repeat в css
messagesBackgroundPosition	Для background-position в css
messagesBackgroundSize	Для background-size в css

Пример кода виджета:

виджета с отдельно настроенными цветами для сообщений и для кнопок
виджета, который всегда открыт при открытии страницы
виджета с формой, в которой есть 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="ХХХХХХ-ХХХХ-ХХХХХХ"
      data-widget-visible-by-default="true"
	  data-widget-new-messages='{"badge": true, "favicon": true, "notifications": true }'
      data-widget-user-login="default"
	  
	  data-widget-operator-name = "true"
	  data-widget-operator-icon = "https://cdn.pixabay.com/photo/2014/04/02/10/14/support-303213_960_720.png"
	  data-widget-bot-icon = "https://upload.wikimedia.org/wikipedia/commons/b/b6/Robot-icon.png"
      
	  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",
        "messagesBackgroundImageUrl": "https://image.freepik.com/free-vector/memphis-pattern-background_53876-85418.jpg",
        "messagesBackgroundRepeat": "repeat-y",
        "messagesBackgroundPosition": "50% 100%",
        "messagesBackgroundSize": "auto"
        }'
      data-widget-user-form='{
            "message": "Здравствуйте, я ваш помощник, представьтесь, пожалуйста.",
            "required": true,
            "submitButton": {
                "text": "Отправить"
            },
            "fields": [
                {
                    "name": "senderFullName",
                    "label": "Ф.И.О.",
                    "rules": [
                        {"required": true, "message": "Пожалуйста, укажите ваше Ф.И.О."}
                    ]
                },
                {
                    "name": "Отделение",
                    "label": "Отделение",
                    "rules": [
                        {"required": false, "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>

autoFAQ Knowledge Base > Виджет для сайта > виджет_стандартный.PNG

Стандартный виджет

autoFAQ Knowledge Base > Виджет для сайта > виджет_измененный.PNG

Измененный виджет