Table of Contents

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

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

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

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

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

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

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

Code Block

language	html

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

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

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

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

Code Block

language	js

<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

language	js

<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-hide-close - параметр, который отключает кнопку закрытия виджета.

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

Code Block
data-widget-hide-close = 'true'

или

Code Block
window.widgetHideClose = true

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

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

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

data-widget-auto-start-connection - позволяет автоматически устанавливать сокет соединение с сервером, подгружать историю диалога без необходимости раскрытия виджета. Не рекомендуется устанавливать данный параметр на высоконагруженных сервисах, на сайты которых могут зайти 5000 пользователей и более в час, поскольку это увеличит нагрузку на систему.

true - автоматически устанавливает соединение, без раскрытия виджета

Code Block
data-widget-auto-start-connection = 'true'

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

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

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

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

language	html

data-widget-api-ns = "autofaq"

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

autofaq.open() - развернуть виджет
autofaq.close() - свернуть виджет
autofaq.sendMessage({text: "Привет"}) - отправить сообщение от лица пользователя
autofaq.logout() - сбросить текущего пользователь с историей переписки

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

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

Code Block

language	js

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

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
messagesOutdatedButtonBackgroundColor	устанавливает цвет неактивных кнопок
messagesOutdatedButtonTextColor	устанавливает цвет текста неактивных кнопок
widgetButtonBackgroundColor	устанавливает цвет фона иконки виджета

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

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 }

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

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

"AUTOFAQ_OPEN_DIALOG" - открытие виджета
"AUTOFAQ_CLOSE_DIALOG" - закрытие виджета
"AUTOFAQ_USER_SEND_MESSAGE" - пользователь написал сообщение
"AUTOFAQ_USER_UPDATE_INFO" - обновление информации о пользователе. Например заполнена форма.

Expand

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

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

Expand

title	Google analytics

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

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

Expand

title	“HTML вариант”

виджета с отдельно настроенными цветами для сообщений и для кнопок
виджета, который всегда открыт при открытии страницы
виджета с формой, в которой есть 2 обязательных к заполнению поля - ФИО и Отделение и кнопка Отправить
виджета с надписью "Мы на связи!"
виджета с автоматическим открытием через 5 секунд
виджета, который отображает имя оператора
виджета с нестандартной иконкой бота

Code Block

language	js

<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

language	js

    <script>
        const link = document.createElement('link');
        link.href='https://chat.autofaq.ai/widget/static/css/main.css';
        link.rel='stylesheet';
 
        const script = document.createElement('script');
        script.id = 'autofaqWidget';
        script.type = "text/javascript";
        script.src = "https://chat.autofaq.ai/widget/static/js/main.js";

        window.widgetHost = 'https://chat.autofaq.ai';
        window.widgetServiceId = '{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",
        };
        window.widgetIniteMessage = false;
        window.widgetInviteMessage = {"message": "Готов помочь!", "hideOnOpen": true, "showOnClose": true};
        window.widgetUserPayload = {"key": "value"};

        document.head.appendChild(link);
        document.head.appendChild(script);
    </script>

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

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

Переопределение стилей

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

Изменение радиуса скругления краев:

Code Block

language	js

<style>
.chat21-sheet{
  border: 2px solid CornflowerBlue;
   border-radius: 50px !important;
}
</style>

Разворачивание списка каналов

В виджете есть возможность настройки и показа списка доступных каналов помимо виджета.

Image Removed

Image Added

Пока для встраивания доступны каналы следующих типов:

виджет (включен всегда, убрать нельзя)
ВКонтакте
Telegram
Whatsapp
Viber

Можно расставить их в том порядке как вы хотите, чтобы они отображались у пользователей.

Для включения этой опции нужно зайти в канал Виджет и в блоке Настройка списка каналов в виджете включить эту опцию (1). При нажатии на кнопку Добавить канал в список (2) появляется блок с настройкой канала. В выпадающем списке отображаются названия активных каналов доступных типов.

При клике на иконки каналов WhatsApp, Telegram и Viber с компьютера пользователь видит окошко с кнопкой подключения и QR кодом для сканирования телефоном - это позволит открыть канал на телефоне. При нажатии на кнопку подключения открываются ссылки вида:

https://t.me/<имя_бота_телеграмм> - для Telegram
https://wa.me/7999541234 - для WhatsApp
https://vk.me/club1134567 - для VK
viber://pa/info?uri=<имя_бота_вайбер> - для Viber

QR кода также содержат эти ссылки и позволяют открыть ссылку сразу на телефоне.

При открытии виджета на телефоне клик на иконке канала сразу открывает ссылку без отображения окошек.

Все текстовки задаются администратором в настройках подключения каналов к виджету.

Для каждого из дополнительных каналов можно указать:

название, которая отображается в заголовке окошка;
общую текстовку, которая отображается на самом верху окошка;
текст над кнопкой подключения;
текст над QR кодом.

Info
Важно! Для каждого подключаемого канала в список нужно заполнить новое поле в этом канале - Название группы (Telegram, VK, Viber) или номер телефона (для WhatsApp)

Виртуальная клавиатура

Параметр data-widget-enable-virtual-keyboard позволяет включить отображение виртуальной клавиатуры в интерфейсе виджета

Code Block

language	js

data-widget-enable-virtual-keyboard="true"

Сброс сессии пользователя

Для сброса сессии пользователя в виджете на стороне портала можно вызвать команду

Code Block
autofaq.logout()

После того виджет будет переоткрыт уже с новым пользователем.

Versions Compared

Old Version 53

New Version Current

Key

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

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

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

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

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

Управление возможностью свернуть виджет

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

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

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

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

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

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

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

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

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

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

Переопределение стилей

Разворачивание списка каналов

Виртуальная клавиатура

Сброс сессии пользователя

Page Comparison

Versions Compared

Old Version 53

New Version Current

Key

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

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

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

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

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

Управление возможностью свернуть виджет

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

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

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

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

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

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

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

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

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

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

Переопределение стилей

Разворачивание списка каналов

Виртуальная клавиатура

Сброс сессии пользователя