Versions Compared

Old Version 42

changes.mady.by.user Dennis Victorovich

Saved on

compared with

New Version 43

changes.mady.by.user Dennis Victorovich

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents

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

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

  1. Включить канал виджет в разделе Настройки - Каналы - Widget

  2. Указать название нового канала в AutoFAQ и название, отображаемое в заголовке виджета

  3. Скопировать основной код виджета (кнопка Копировать код)

  4. Вставить код виджета на HTML страницу

  5. При необходимости добавить в код виджета управляющие параметры (см ниже) 

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

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

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

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

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

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

Для каждого пользователя в AutoFAQ могут быть переданы любые произвольные данные в формате key: value

Основной способ - через указание значения переменной data-widget-user-payload в теле вызова скрипта виджета:

Code Block
languagejs
<link href="https://chat.autofaq.ai/widget/static/css/main.css" rel="stylesheet">

<script data-widget-host="https://chat.autofaq.ai"
    data-widget-service-id="ecdeхх-хххх-хххх-хххххх"
    data-widget-channel-id="97e0хх-хххх-хххх-хххххх"
    data-widget-user-payload = '{
        "user_height": "183", 
        "user_hair":"blond"
        }'
    src="https://chat.autofaq.ai/widget/static/js/main.js"
    id="autofaqWidget"></script>

Переданные в AutoFAQ данные о пользователе могут быть использованы в сценариях, а так же отобразятся в боковой панели оператора:

Альтернативный способ передачи даполнительных переменных - через объект window.widgetUserPayload вне тела вызова скрипта, а просто в коде страницы:

Code Block
languagejs
<link href="https://chat.autofaq.ai/widget/static/css/main.css" rel="stylesheet">

<script>
  window.widgetUserPayload = {"user_height": "192", "user_hair": "green"}
</script>

<script data-widget-host="https://chat.autofaq.ai"
    data-widget-service-id="ecdeхх-хххх-хххх-хххххх"
    data-widget-channel-id="97e0хх-хххх-хххх-хххххх"
    src="https://chat.autofaq.ai/widget/static/js/main.js"
    id="autofaqWidget"></script>

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

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
languagehtml
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": "Указан некорректный почтовый адрес."}
                    ]
                }
            ]
        }'

Поле с выпадающим списком

После ввода первого символа автоматически срабатывает фильтрация и оставляет только те значения, в которых есть введенный символ.

minSearch - кол-во введенных символом, после которого будет открыт список всех найденных значений (0 - открывать сразу при клике на поле).

Code Block
data-widget-user-form='{
    "message": "Выберите значение",
    "required": true,
    "submitButton": {
        "text": "Отправить"
    },
    "fields": [
        {
            "name": "Значение",
            "minSearch": 0,
            "type": "select",
            "options": [
                "Значение 1",
                "Значение 2",
                "Значение Х"
            ],
            "label": "Список",
            "rules": [
                {
                    "required": true,
                    "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 - наименование объекта виджета.

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

Доступные методы:

  • autofaq.open() - развернуть виджет

  • autofaq.close() - свернуть виджет

  • window.autofaq.sendMessage({text: "Привет"})- отправить сообщение от лица пользователя

Перед использованием метода необходимо дождаться инициализации виджета на странице.

Пример кода для ожидания:

Code Block
languagejs
let intervalId = setInterval(() => {
    if (window.autofaq && autofaq.sendMessage) {
        clearInterval(intervalId);
        window.autofaq.sendMessage({text: "Привет"});
    }
}, 50)

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

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

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


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

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

Свой паттерн

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

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

Code Block
languagexml
<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
languagejs
window.widgetStyleParams = {
    messagesBackgroundImageUrl: "https://i.stack.imgur.com/yGOkq.png",
    messagesBackgroundRepeat: "repeat-y",
    messagesBackgroundPosition: "50% 50%",
    messagesBackgroundSize: "contain"
}

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

Code Block
languagexml
<script
data-widget-style-params='{
  "messagesBackground": "lightcyan"
}'
...
src="...main.js"
></script>
Code Block
languagejs
window.widgetStyleParams = {
    messagesBackground: "lightcyan"
}

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

Code Block
languagexml
<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
languagejs
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
languagehtml
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
    }

Google analytics и Яндекс метрики

Отправляемые события:

  • "AUTOFAQ_OPEN_DIALOG" - открытие виджета

  • "AUTOFAQ_CLOSE_DIALOG" - закрытие виджета

  • "AUTOFAQ_USER_SEND_MESSAGE" - пользователь написал сообщение

  • "AUTOFAQ_USER_UPDATE_INFO" - обновление информации о пользователе. Например заполнена форма.

Expand
titleЯндекс метрики

Для настройки по мимо вставки самого кода счетчика необходимо в виджет передать его номер через параметр data-widget-ymid="00000000". И добавить "Цели" в Яндекс метриках

Expand
titleGoogle analytics

Дополнительных настроек не требуется. Достаточно вставить на страницу уже готовый код "Глобальный тег (gtag.js)" из раздела "Сведения о веб-потоке"

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

Expand
title“HTML вариант”

  • виджета с отдельно настроенными цветами для сообщений и для кнопок

  • виджета, который всегда открыт при открытии страницы

  • виджета с формой, в которой есть 2 обязательных к заполнению поля - ФИО и Отделение и кнопка Отправить

  • виджета с надписью "Мы на связи!"

  • виджета с автоматическим открытием через 5 секунд

  • виджета, который отображает имя оператора

  • виджета с нестандартной иконкой бота

Code Block
languagejs
<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>
Expand
title“Динамический вариант” - конфигурация параметров виджета с помощью javascript
Code Block
languagejs
    <script>
        const widgetLinklink = `<link type="text/css" href="document.createElement('link');
        link.href='https://dockerhosts9941chat.blob.core.windows.netautofaq.ai/widget/static/css/mainebzmain.css" ';
        link.rel="'stylesheet"';
/>`; 
        const script = document.createElement('script');


       window.widgetHost = 'https://chat.autofaq.ai';
        script.id = 'autofaqWidget';
        script.type = "text/javascript";
        script.src = "https://chat.autofaq.ai/widget/static/js/main.js";

        window.widgetServiceIdwidgetHost = 'e7b8997b-48f3-444c-a87d-9d9e56d3dddfhttps://chat.autofaq.ai';
        window.widgetChannelIdwidgetServiceId = '2f7ce72f-8003-4e17-b879-e3c71f239149{SERVICE-ID}';
        window.widgetChannelId = '{cHANNEL-ID}';
        window.widgetNewMessages = {"badge": true, "favicon": true, "notifications": true};
        window.widgetUserLogin = 'default';
        window.widgetOperatorName = false;
 
      window.widgetOperatorIcon = 'https://dockerhosts9941.blob.core.windows.net/widget/operator.png';
        window.widgetBotIcon = 'https://dockerhosts9941.blob.core.windows.net/widget/bot.png';
        window.widgetStyleParams = {
            "widgetButtonBackgroundColor": "rgb(255,79,18)",
            "widgetButtonTextColor": "#FFFFFF",
            "headerBackgroundColor": "#273A64",
            "headerTextColor": "#FFFFFF",
            "messageToWidgetBackgroundColor": "#273A64",
            "messageToWidgetTextColor": "#FFFFFF",
            "messageFromWidgetBackgroundColor": "rgb(227,233,236)",
            "messageFromWidgetTextColor": "#000000",
            "messagesButtonBackgroundColor": "#979799",
            "messagesButtonTextColor": "#FFFFFF",
            "messagesButtonHoverBackgroundColor": "#E3E8EC",
            "messagesButtonHoverTextColor": "#000000",
            "messagesOperatorFullNameTextColor": "#101828",
            "messagesOperatorTimeTextColor": "#979799",
    window.widgetOperatorIcon = 'https://dockerhosts9941.blob.core.windows.net/widget/operator.png';
         "messagesBackgroundImageUrl": "window.widgetBotIcon = 'https://dockerhosts9941.blob.core.windows.net/widget/background.png",bot.png';
        window.widgetStyleParams = {
            "messagesBackgroundRepeatwidgetButtonBackgroundColor": "repeat-yrgb(255,79,18)",
            "messagesBackgroundSizewidgetButtonTextColor": "auto#FFFFFF",
        };
        window.widgetIniteMessage = false;
        window.widgetInviteMessage = {"message": "Готов помочь!", "hideOnOpen": true, "showOnClose": true};
         window.widgetUserPayload = {"key": "value"};

        document.head.appendChild(widgetLinklink);
        document.head.appendChild(script);

    </script>

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

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