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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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 вне тела вызова скрипта, а просто в коде страницы:

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

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

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

data-widget-hide-close - параметр, который отключает кнопку закрытия виджета.

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

• все остальные значения или отсуствие параметра - показывать крестик

data-widget-hide-close = 'true'

или

window.widgetHideClose = true

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

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

• timer - устанавливает на время через которое будет развернут виджет (по-умолчанию 5 секунд);

• once - разворачивать виджет только один раз, если установлено true, или разворачивать виджет при каждом заходе на страницы с виджетом, если установлен false

  data-widget-auto-open='{
  	"timer": 5,
  	"once": false
  }'

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

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

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

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

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

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

• badge - отображать иконку на кнопке виджета, если установлено true

• favicon - отображать иконку на вкладке браузера, если установлено true

• notifications - отображать всплывающие уведомления в браузере, если установлено true

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

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

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

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

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

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

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

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

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 - наименование объекта виджета.

data-widget-api-ns = "autofaq"

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

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

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

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

• autofaq.logout() - сбросить текущего пользователь с историей переписки

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

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

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

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

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

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

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

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

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

window.widgetStyleParams = {
    messagesBackground: "lightcyan"
}

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

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

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

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

• resizeable - true/false - возможность пользователю на странице самому изменять размеры виджета с помощью мыши

• width - указание в % или целое число - задание ширины виджета

• height - указание в % или целое число - задание высоты виджета

• minWidth - целое число - задание минимальной ширины виджета

• minHeight - целое число - задание минимальной высоты виджета

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

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" - обновление информации о пользователе. Например заполнена форма.

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

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

 Google analytics

Дополнительных настроек не требуется. Достаточно вставить на страницу уже готовый код "Глобальный тег (gtag.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>

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

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

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

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

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

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

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

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

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

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

• виджет (включен всегда, убрать нельзя)

• ВКонтакте

• 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 кодом.

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

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

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

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

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

window.autoFaqApi.clearUser()

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