Page Comparison

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

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

...

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

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

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

...

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

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": { "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-bot-name - отображаемое имя бота, если параметр указан, то его содержимое заменяет настройку заменяет собой имя, указанное в настройке Имя оператора в UI настроек виджета.

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

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

...

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

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

...

Code Block

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() можно разворачивать и сворачивать виджет

Code Block
data-widget-api-ns = "

...

autofaq"

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

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

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

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

Свой паттерн

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"
}'
...
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='{
  "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 = {
    messagesBackground: "lightcyan"
}

Code Block

language	xml

<script
data-widget-style-params='{
  "messagesBackground": "lightcyan"
}'
...
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"
}

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>

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

смена иконок оператора и бота, смена отображаемого имени для оператора и бота.

Если вы не хотите, чтобы в виджете при ответе оператора отображалось имя этого оператора или просто была информация, что сейчас разговаривает оператор, а не бот, тогда никакие дальнейшие настройки вносить в виджет не надо. Далее будут описаны примеры как сделать, чтобы пользователь понимал, что он общается с оператором.

Название параметраОписаниеПримерыwidgetBotNameотображаемое имя бота. Если заполнено - заменяет widgetBotName из админки.

window.widgetBotName = "Bot AutoFAQ";

widgetOperatorName

отображаемое имя оператора.

Если строка - заменяет название оператора.

Если true - берет название из данных с сервера (если сервер не прислал то будетAutoFAQ operator).

Во всех остальных случаях выводится то же значение что и для бота

window.widgetOperatorName = true;
window.widgetOperatorName = "AutoFAQ operator";
widgetOperatorIconиконка оператора. Если не установлена, то используется иконка по умолчанию.

window.widgetOperatorIcon = "https://cdn.pixabay.com/photo/2014/04/02/10/14/support-303213_960_720.png";

widgetBotIconиконка бота. Если не установлена, то используется иконка по умолчанию.

window.widgetBotIcon = "https://upload.wikimedia.org/wikipedia/commons/b/b6/Robot-icon.png";

Пример оформления

css
messagesBackgroundPosition	Для background-position в css
messagesBackgroundSize	Для background-size в css

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

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

Code Block

<link href="https://croc-chat.autofaq.ai/widget/static/css/main.css" rel="stylesheet">
    <script>
        window.widgetOperatorName = true;
        window.widgetBotIcon = "https://upload.wikimedia.org/wikipedia/commons/b/b6/Robot-icon.png"; 
    </script>
    <script data-widget-host="https://croc-chat.autofaq.ai"
      data-widget-service-id="ваш 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-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": true, "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>

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

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

Versions Compared

Old Version 18

New Version 19

Key

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

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

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