View Source

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

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

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