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 секунд и указание, работает 1 раз для конкретного пользователя или каждый раз на новой странице повторяется)
  

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

• дополнительно, реализована функция для программного открытия / закрытия виджета через вызов с сайта, для этого в код виджета необходимо добавить
  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>

• data-widget-new-messages - оповещения пользователей виджета:

  • push-уведомления в браузере (если разрешены);

  • цифры-иконки на вкладке;

  • цифра-иконка на свернутом виджете.

  На данный момент функциональность работает в браузерах Chrome, Yandex.Browser. Нужно в код виджета на странице добавить:

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

  При необходимости настройки времени всплывающего десктопного push-уведомления для клиента, необходимо добавить в строку время timeout в миллисекундах (по умолчанию, стоит 3 секунды).  60000 миллисекунд - 1 минута. 
  data-widget-new-messages='{"badge": true, "favicon": true, "notifications": {"timeout": 60000}}'

• data-widget-user-form - с его помощью вы можете создавать форму для сбора информации, которую клиент должен указать (или может указать) для последующего отображения у оператора. Ниже приведен основной шаблон настройки, а еще ниже приведен работающий код виджета с примером, объединяющим все основные настройки.
  
  

  Code Block

  data-widget-user-form='{ "message": "Представьтесь, пожалуйста.", "required": true, "submitButton": { "text": "Отправить" }, "fields": [ { "name": "senderFullName", "label": "Ф.И.О.", "rules": [ {"required": true, "message": "Пожалуйста, укажите Ф.И.О."} ] }, { "name": "senderEmail", "label": "Email", "rules": [ {"required": true, "message": "Требуется указать почту."}, {"type": "email", "message": "Почта имеет не верный формат."} ] }, { "name": "comment", "label": "Произвольный текст" } ] }'

  
  

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

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

<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="ваш 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"
        }'
      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>