Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 16 Next »

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

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

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

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

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

  • 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": "Произвольный текст"
                }
            ]
        }'
  • смена иконок оператора и бота, смена отображаемого имени для оператора и бота.

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

Название параметраОписаниеПримеры
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";


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

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

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

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

  • No labels