Виджет для сайта

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

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

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

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

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

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 и другие аналогичные отвечают за оформление кнопки на форме сбора информации.

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

	Через глобальную переменную (JavaScript)	Через атрибуты тега script (Html)
Свой паттерн	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>

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

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 - с его помощью вы можете создавать форму для сбора информации, которую клиент должен указать (или может указать) для последующего отображения у оператора. Ниже приведен основной шаблон настройки, а еще ниже приведен работающий код виджета с примером, объединяющим все основные настройки.

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>