Page Comparison

Table of Contents

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

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

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

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

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

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

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

Code Block

language	html

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

Управление иконкой виджета на странице

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

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

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

Управление автораскрытием виджета

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

timer - устанавливает на время через которое будет развернут виджет (по-умолчанию 5 секунд);
once - разворачивать виджет только один раз, если установлено true, или разворачивать виджет при каждом заходе на страницы с виджетом, если установлен false
Code Block
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 секунды

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

Code Block
data-widget-new-messages='{ "badge": true, "favicon": true, "notifications": { "icon": "/favicon.ico", "timeout": 60000, "title": "New message" } }'

Форма для сбора данных

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 - сообщение при введенном в поле некорректном значении

Code Block

language	html

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-bot-icon - иконка бота в замен стандартной, если параметр указан, то сообщения бота будут сопровождаться данной иконкой, если параметр не указан - будет использована иконка по-умолчанию

Code Block
data-widget-bot-name = "Автоответчик" data-widget-bot-icon = "https://upload.wikimedia.org/wikipedia/commons/b/b6/Robot-icon.png"

Управление именем и иконкой оператора

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

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

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

Code Block
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-api-ns - наименование объекта виджета для программного развертывания и свертывания виджета, после чего командами autofaq.open() и autofaq.close() можно разворачивать и сворачивать виджет

Code Block
data-widget-api-ns = "autofaq"

Управление внешним видом виджета

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

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

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

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

Свой паттерн

Code Block

language	xml

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

Code Block

language	js

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

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

Code Block

language	xml

<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>

Code Block

language	js

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

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

Code Block

language	xml

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

Code Block

language	js

window.widgetStyleParams = {
    messagesBackground: "lightcyan"
}

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

Code Block

language	xml

<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>

Code Block

language	js

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"
}

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

Управление размером виджета

data-widget-sizes - блок для управления размерами виджета на странице. Доступные для управления параметры:

resizeable - true/false - возможность пользователю на странице самому изменять размеры виджета с помощью мыши
width - указание в % или целое число - задание ширины виджета
height - указание в % или целое число - задание высоты виджета
minWidth - целое число - задание минимальной ширины виджета
minHeight - целое число - задание минимальной высоты виджета

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

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

Code Block

language	html

data-widget-sizes = '{
        "resizeable": true,
        "width": "30%",
        "height": "80%",
        "minWidth": 400,
        "minHeight": 300
    }'

Code Block
window.widgetSizes = { "width": "30%", "height": "80%", "minWidth": 400, "minHeight": 300, "resizeable": true }

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

“HTML вариант”

виджета с отдельно настроенными цветами для сообщений и для кнопок
виджета, который всегда открыт при открытии страницы
виджета с формой, в которой есть 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="ХХХХХХ-ХХХХ-ХХХХХХ"
      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>

“Динамический вариант” - конфигурация параметров виджета с помощью javascript:

Code Block

language	js

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        const stylesLinkwidgetLink = `<link type="text/css" href="https://test-chat.autofaq.aidockerhosts9941.blob.core.windows.net/widget/static/css/mainmainebz.css" rel="stylesheet" />`;

        const script = document.createElement('script');

        window.widgetHost = 'https://test-chat.autofaq.ai';
        script.id = 'autofaqWidget';
        script.type = "text/javascript";
        script.src = "https://test-chat.autofaq.ai/widget/static/js/main.js";
        window.widgetServiceId = 'e7b8997b-48f3-444c-a87d-9d9e56d3dddf';
        window.widgetChannelId = '2f7ce72f-8003-4e17-b879-e3c71f239149';
        window.widgetNewMessages = '{"badge": true, "favicon": true, "notifications": true}';
        window.widgetUserLogin = 'default';
        window.widgetOperatorName = false;
        window.widgetOperatorIcon = 'https://dockerhosts123dockerhosts9941.blob.core.windows.net/widget/operator.png';
        window.widgetBotIcon = 'https://dockerhosts123dockerhosts9941.blob.core.windows.net/widget/bot.png';
        window.widgetUserPayloadwidgetStyleParams = {"key": "value"};
          window.widgetStyleParams = '{"widgetButtonBackgroundColor": "rgb(255,79,18)",
            "widgetButtonTextColor": "#FFFFFF",
            "headerBackgroundColor": "#273A64",
 "headerTextColor": "#FFFFFF", "          "headerTextColor": "#FFFFFF",
            "messageToWidgetBackgroundColor": "#273A64",
            "messageToWidgetTextColor": "#FFFFFF",
            "messageFromWidgetBackgroundColor": "rgb(227,233,236)",
            "messageFromWidgetTextColor": "#000000",
"messagesButtonBackgroundColor": "#979799",            "messagesButtonBackgroundColor": "#979799",
            "messagesButtonTextColor": "#FFFFFF",
            "messagesButtonHoverBackgroundColor": "#E3E8EC",
            "messagesButtonHoverTextColor": "#000000",
            "messagesOperatorFullNameTextColor": "#101828",
            "messagesOperatorTimeTextColor": "#979799",": "#979799",
            "messagesBackgroundImageUrl": "https://dockerhosts9941.blob.core.windows.net/widget/background.png",
            "messagesBackgroundRepeat": "repeat-y",
            "messagesBackgroundSize": "auto"}'
        };
        window.widgetIniteMessage = false;
        window.widgetInviteMessage = '{"message": "Готов помочь!", "hideOnOpen": true, "showOnClose": true}';

        window.widgetUserPayload = {"key": "value"};

        $('head').append(stylesLinkwidgetLink, script);

    </script>

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

Image Removed

Image Added

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

Image Added

Versions Compared

Old Version 29

New Version 30

Key

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

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

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

Управление иконкой виджета на странице

Управление автораскрытием виджета

Оповещение пользователя о новых сообщениях

Форма для сбора данных

Управление именем и иконкой бота

Управление именем и иконкой оператора

Управление виджетом из кода страницы

Управление внешним видом виджета

Управление размером виджета

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

“HTML вариант”

“Динамический вариант” - конфигурация параметров виджета с помощью javascript: