Перейти на сайт

Отчёт по настройкам онлайн‑консультанта

Описание раздела

Раздел «Настройки онлайн‑консультанта» позволяет кастомизировать внешний вид и поведение виджета онлайн‑консультанта на сайте. С его помощью можно адаптировать интерфейс под фирменный стиль компании и обеспечить удобство взаимодействия для посетителей.

Как выглядит страница

Страница настроек состоит из двух основных блоков:

  1. Панель фильтров и параметров (в верхней части страницы): содержит настройки внешнего вида виджета и его позиционирования на экране.
  2. Рабочее пространство (в центральной части страницы): область предпросмотра — отображает виджет с текущими настройками в реальном времени.

Фильтры и параметры настройки

В панели настроек доступны следующие параметры:

  • Цвет — выбор цветовой схемы виджета (например, основной цвет кнопки и элементов интерфейса).
  • Непрозрачность — настройка уровня прозрачности виджета. Текущее значение: 1 (полная непрозрачность).
  • Размер — регулировка размера виджета. Текущее значение: 64 px.
  • Иконка — выбор иконки для кнопки виджета. Текущий вариант: comments.
  • Отступ слева — расстояние от левого края экрана до виджета (в пикселях).
  • Отступ справа — расстояние от правого края экрана до виджета. Текущее значение: 48 px.
  • Отступ сверху — расстояние от верхнего края экрана до виджета (в пикселях).
  • Отступ снизу — расстояние от нижнего края экрана до виджета. Текущее значение: 48 px.

Рабочее пространство

Центральная часть страницы представляет собой область предпросмотра. Здесь отображается виджет онлайн‑консультанта с применёнными настройками. В этой области можно:

  • визуально оценить расположение и внешний вид виджета;
  • выбрать область экрана для размещения виджета (например, левый нижний угол, правый верхний угол и т. д.).

Кнопки управления

Под панелью настроек и рабочим пространством расположены функциональные кнопки:

  • Просмотреть — применяет выбранные настройки и обновляет предпросмотр виджета в рабочем пространстве. Позволяет увидеть, как будет выглядеть виджет с новыми параметрами.
  • Сохранить — сохраняет все внесённые изменения в настройках виджета. После нажатия параметры применяются на сайте.
  • Копировать код — копирует HTML‑код виджета в буфер обмена. Этот код можно вставить на страницы сайта, чтобы разместить онлайн‑консультант.

Код для вставки виджета

В верхней части страницы отображается HTML‑код, необходимый для интеграции виджета на сайт. Код содержит:

  1. Ссылка на стили
  2. Скрипт виджета
  3. Параметры настройки виджета

Ссылка на стили (CSS)

  • подключает файл стилей (index.css) для виджета онлайн‑консультанта;
  • rel = "stylesheet" — указывает, что это таблица стилей;
  • href — адрес, откуда загружается CSS‑файл;
  • data-kibersoft-widget — кастомный атрибут, вероятно, нужен для внутренней идентификации виджета системой Kibersoft.

Скрипт виджета (JavaScript)

  • type = "module" — указывает, что скрипт является JavaScript‑модулем;
  • async — скрипт загружается асинхронно, не блокируя загрузку страницы;
  • crossorigin — атрибут для корректной загрузки ресурсов с других доменов (CORS);
  • src — путь к основному JS‑файлу виджета.
  • data-kibersoft-widget — идентификатор виджета для системы Kibersoft;
  • data-kibersoft-live-assist-url — базовый URL сервиса онлайн‑консультанта;
  • data-kibersoft-live-assist-target-tenant-slug — идентификатор клиента/аккаунта в системе

Параметры настройки виджета

Эти атрибуты задают внешний вид и расположение виджета:

  • data-kibersoft-live-assist-color — цвет виджета: #3bb273 (зеленовато‑бирюзовый);
  • data-kibersoft-live-assist-opacity — непрозрачность: 1 (полная непрозрачность);
  • data-kibersoft-live-assist-size — размер виджета: 64 пикселя;
  • data-kibersoft-live-assist-icon — иконка виджета: comments (вероятно, иконка в виде речевого облака/сообщения);
  • data-kibersoft-live-assist-position-left — отступ от левого края экрана: не задан (пустая строка);
  • data-kibersoft-live-assist-position-right — отступ от правого края экрана: 48 пикселей;
  • data-kibersoft-live-assist-position-top — отступ от верхнего края экрана: не задан (пустая строка);
  • data-kibersoft-live-assist-position-bottom — отступ от нижнего края экрана: 48 пикселей.

Итог: код подключает виджет онлайн‑консультанта от Kibersoft. Он:

  1. Загружает стили оформления.
  2. Подключает основной JS‑модуль (асинхронно).
  3. Настраивает внешний вид виджета (цвет, размер, иконку, непрозрачность).
  4. Задаёт его позицию на экране (прижат к нижнему правому углу с отступами 48 px справа и снизу).
  5. Указывает системе, к какому аккаунту (kibersoft) и сервису (demo.crm.kibersoft.online) относится виджет.

Кому полезен раздел

  • Веб‑разработчикам — для быстрой интеграции и настройки виджета без правки кода вручную.
  • Дизайнерам — для согласования внешнего вида виджета с фирменным стилем сайта.
  • Администраторам сайта — для оперативного изменения параметров виджета и публикации обновлений.

Основные функции

  1. Настройка внешнего вида: изменение цвета, размера, иконки и уровня непрозрачности виджета.
  2. Позиционирование: установка отступов для точного размещения виджета на экране.
  3. Предпросмотр: мгновенная визуализация изменений в рабочем пространстве.
  4. Сохранение настроек: фиксация выбранных параметров для применения на сайте.
  5. Генерация и копирование кода: получение готового HTML‑кода для вставки виджета на страницы.