Page Comparison

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

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

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

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 секунды

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

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-api-ns = "AutoFAQ"; - определяет в какой глобальной переменной будет лежать API виджета
в дальнейшем, можно будет обращаться, например AutoFAQ.open(); или AutoFAQ.close(); для свертывания / развертывания виджета

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

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

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

<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",
    messagesBackgroundRepeat: "repeat-y",
    messagesBackgroundPosition: "50% 50%",
    messagesBackgroundSize: "contain"
}

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

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

<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.widgetBotName = "Bot AutoFAQ";

window.widgetOperatorName = true;
window.widgetOperatorName = "AutoFAQ operator";

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

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

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

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

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