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

Виджеты

Что такое виджеты?​

Виджеты — это чат-виджеты для встраивания на ваш сайт. Они позволяют посетителям вашего сайта общаться с искусственным интеллектом через удобный интерфейс чата. Виджеты настраиваются под ваш бренд и могут работать с различными сценариями для автоматизации общения с клиентами.

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

  • Создание виджетов — кнопка "Добавить" в верхней панели
  • Настройка внешнего вида — тема, цвета, размеры, анимации
  • Позиционирование — расположение на экране (слева/справа)
  • Функциональные настройки — выбор сценария, разрешенные источники
  • Получение кода для встраивания — копирование кода для размещения на сайте
  • Управление виджетами — включение/выключение, редактирование, удаление

Информация в таблице:​

  • Название — имя виджета для идентификации
  • Описание — краткое описание назначения виджета
  • Код для встраивания — скрипт для копирования и размещения на сайте
  • Состояние — включен или выключен виджет

Создание виджета​

Шаг 1: Основные настройки​

Название​

Поле для ввода названия виджета. Используется для отображения в таблице виджетов и идентификации. Обязательное поле.

Описание​

Краткое описание назначения виджета. Помогает понять, для чего используется виджет. Обязательное поле.

Приветственный текст​

Первое сообщение, которое будет отправлено в чат при его открытии. Это сообщение увидит посетитель сайта при первом обращении к виджету. Обязательное поле.

Примеры:

  • "Здравствуйте, могу ли я помочь вам?"
  • "Добро пожаловать! Чем могу помочь?"
  • "Привет! Задайте свой вопрос"

Язык виджета​

Выберите язык интерфейса виджета:

  • Русский — для русскоязычной аудитории
  • Английский — для англоязычной аудитории
  1. Нажмите "Добавить" в верхней панели
  2. Заполните основные настройки:
    • Название виджета
    • Описание
    • Приветственный текст
    • Язык виджета
  3. Перейдите к следующим шагам

Шаг 2: Функциональные настройки​

Сценарий​

Выберите сценарий, который будет использоваться для общения с посетителями сайта. Сценарий определяет логику диалога и действия, которые будет выполнять искусственный интеллект. Обязательное поле.

Важно: Сценарий должен быть готов к использованию (статус "Готов").

Включить виджет​

Чекбокс для активации виджета. Если включен, виджет будет виден посетителям сайта. Статус можно изменить в любое время после создания.

Рекомендация: Создайте виджет с выключенным статусом, настройте все параметры, проверьте код для встраивания, затем включите виджет.

Список разрешенных источников​

Укажите домены, на которых разрешено использовать виджет. Это обеспечивает безопасность и предотвращает несанкционированное использование вашего виджета.

Как добавить источник:

  1. Введите URL домена в поле (например, https://example.ru)
  2. Нажмите кнопку с иконкой "+"
  3. Домен добавится в список разрешенных источников
  4. Повторите для каждого домена

Примеры разрешенных источников:

  • https://example.ru
  • https://www.example.ru
  • https://shop.example.ru

Важно: Указывайте полный URL с протоколом (https://). Можно добавить несколько доменов.

  1. Выберите сценарий из списка доступных
  2. При необходимости включите виджет
  3. Добавьте разрешенные источники (домены вашего сайта)

Шаг 3: Позиционирование​

Расположение на экране​

Выберите, с какой стороны экрана будет отображаться виджет:

  • Слева — виджет будет в левом нижнем углу
  • Справа — виджет будет в правом нижнем углу (по умолчанию)

Отступ от границ экрана​

Выберите расстояние от края экрана до виджета. Доступные значения: 18, 20, 24, 28, 30, 32 пикселя. По умолчанию используется 24 пикселя.

  1. Выберите расположение (слева или справа)
  2. Установите отступ от границ экрана

Шаг 4: Внешний вид​

Тема​

Выберите цветовую схему виджета:

  • Светлая — светлый интерфейс с темным текстом
  • Темная — темный интерфейс со светлым текстом (по умолчанию)

Акцентный цвет​

Выберите цвет акцентов виджета (кнопки, выделения). Доступно множество цветов:

  • Стандартный (синий)
  • Томатный, Красный, Рубиновый, Малиновый, Розовый
  • Сливовый, Пурпурный, Фиолетовый, Ирис, Индиго
  • Синий, Циан, Бирюзовый, Нефрит, Зеленый, Травяной
  • Бронзовый, Золотой, Коричневый, Оранжевый
  • Янтарный, Желтый, Лаймовый, Мятный, Небесно голубой

Размер кнопки​

Выберите размер кнопки виджета:

  • XS — 48x48 пикселей (маленький)
  • M — 62x62 пикселя (средний, по умолчанию)
  • L — 72x72 пикселя (большой)
  • XL — 84x84 пикселя (очень большой)

Дополнительные эффекты​

  • Тень под кнопкой — добавляет тень под кнопкой виджета
  • Тень под виджетом — добавляет тень под окном чата
  • Анимированная тень под кнопкой — динамическая тень, которая создает эффект глубины
  • Анимация 'Пульс' под кнопкой — пульсирующая анимация для привлечения внимания
  • Обводка кнопки — добавляет рамку вокруг кнопки виджета
  1. Выберите тему (светлая или темная)
  2. Выберите акцентный цвет
  3. Установите размер кнопки
  4. Включите нужные эффекты (тени, анимации, обводка)

Шаг 5: Сохранение​

  1. Проверьте все настройки
  2. Нажмите кнопку "Сохранить"
  3. Дождитесь подтверждения создания виджета
  4. После создания вы получите код для встраивания

Получение кода для встраивания​

После создания виджета вы получите уникальный код для встраивания на ваш сайт.

Как скопировать код​

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

Как вставить код на сайт​

  1. Откройте HTML код вашего сайта
  2. Вставьте скопированный код перед закрывающим тегом </body>
  3. Сохраните изменения на вашем сайте

Пример кода:

<script
    src="https://your-account.flowex-platform.ru/widget/public-key.js"
    data-widget-id="public-key"
    data-api-url="your-account"
    data-domain="flowex-platform.ru"
></script>

Важно:

  • Код должен быть размещен на всех страницах, где должен отображаться виджет
  • Убедитесь, что домен вашего сайта добавлен в список разрешенных источников
  • Виджет будет работать только если он включен

Управление виджетами​

Просмотр списка виджетов​

На странице виджетов отображается таблица со всеми созданными виджетами:

  • Название — имя виджета
  • Описание — краткое описание
  • Код для встраивания — кнопка для копирования кода
  • Состояние — кнопка включения/выключения

Поиск виджетов​

Используйте поле поиска в верхней части таблицы для поиска виджетов по названию или описанию.

Редактирование виджета​

  1. Кликните по строке с нужным виджетом в таблице
  2. Откроется форма редактирования со всеми настройками
  3. Измените нужные параметры
  4. Нажмите "Сохранить"
  5. Дождитесь подтверждения изменений

Важно: После редактирования виджета изменения вступят в силу сразу после сохранения. Если виджет уже встроен на сайт, обновление произойдет автоматически.

Включение и выключение виджета​

Виджет можно включать и выключать без удаления:

  1. В таблице виджетов найдите нужный виджет
  2. В колонке "Состояние" нажмите кнопку:
    • "Включить" — если виджет выключен (зеленая кнопка)
    • "Выключить" — если виджет включен (красная кнопка)
  3. Дождитесь подтверждения изменения статуса

Когда использовать:

  • Выключить — для временного отключения виджета (технические работы, тестирование)
  • Включить — для активации виджета после настройки или паузы

Удаление виджетов​

  1. Выберите виджеты в таблице (можно выбрать несколько через чекбоксы)
  2. Нажмите кнопку удаления в панели действий
  3. Подтвердите удаление в диалоговом окне
  4. Дождитесь подтверждения удаления

Важно: Удаление виджета невозможно отменить. После удаления виджет перестанет работать на всех сайтах, где он был встроен.

Настройки виджета подробно​

Основные настройки​

Название​

  • Назначение: Идентификация виджета в системе
  • Требования: Обязательное поле, должно быть уникальным
  • Рекомендации: Используйте понятные названия, например "Виджет для главной страницы" или "Чат поддержки"

Описание​

  • Назначение: Пояснение назначения виджета
  • Требования: Обязательное поле
  • Рекомендации: Опишите, для чего используется виджет, на каких страницах размещен

Приветственный текст​

  • Назначение: Первое сообщение при открытии чата
  • Требования: Обязательное поле
  • Рекомендации:
    • Используйте дружелюбный тон
    • Укажите, чем может помочь бот
    • Длина: 1-2 предложения

Язык виджета​

  • Назначение: Язык интерфейса виджета
  • Варианты: Русский, Английский
  • Рекомендации: Выбирайте язык в соответствии с аудиторией сайта

Функциональные настройки​

Сценарий​

  • Назначение: Определяет логику общения с посетителями
  • Требования: Обязательное поле, сценарий должен быть готов
  • Связь: Связан с разделом Сценарии
  • Рекомендации:
    • Используйте готовые сценарии
    • Тестируйте сценарий перед подключением к виджету
    • Можно использовать разные сценарии для разных виджетов

Статус виджета​

  • Включен: Виджет виден посетителям сайта
  • Выключен: Виджет скрыт, но настройки сохранены
  • Рекомендации: Создавайте виджеты с выключенным статусом, включайте после полной настройки

Разрешенные источники​

  • Назначение: Безопасность, контроль использования виджета
  • Формат: Полный URL с протоколом (https://)
  • Рекомендации:
    • Указывайте все домены, где будет использоваться виджет
    • Включайте варианты с www и без www
    • Указывайте поддомены отдельно

Позиционирование​

Расположение на экране​

  • Слева: Виджет в левом нижнем углу
  • Справа: Виджет в правом нижнем углу (рекомендуется)
  • Рекомендации:
    • Правая сторона более привычна для пользователей
    • Левая сторона может быть удобна для RTL языков

Отступ от границ​

  • Назначение: Расстояние от края экрана до виджета
  • Варианты: 18, 20, 24, 28, 30, 32 пикселя
  • Рекомендации:
    • 24 пикселя — стандартный отступ
    • Меньший отступ (18-20) для компактных экранов
    • Больший отступ (28-32) для больших экранов

Внешний вид​

Тема​

  • Светлая: Светлый фон, темный текст
  • Темная: Темный фон, светлый текст (рекомендуется)
  • Рекомендации:
    • Темная тема лучше видна на светлых сайтах
    • Светлая тема подходит для темных сайтов
    • Соответствуйте общему стилю сайта

Акцентный цвет​

  • Назначение: Цвет кнопки и акцентов виджета
  • Варианты: 30+ цветов на выбор
  • Рекомендации:
    • Используйте цвета вашего бренда
    • Яркие цвета привлекают больше внимания
    • Приглушенные цвета выглядят профессиональнее

Размер кнопки​

  • XS (48px): Минимальный размер, для компактных сайтов
  • M (62px): Стандартный размер, рекомендуется
  • L (72px): Крупный размер, для привлечения внимания
  • XL (84px): Максимальный размер, для важных виджетов
  • Рекомендации:
    • M — оптимальный баланс видимости и компактности
    • L/XL — для важных виджетов (поддержка, продажи)
    • XS — для минималистичных дизайнов

Эффекты​

  • Тени: Добавляют глубину и объем
  • Анимации: Привлекают внимание посетителей
  • Обводка: Выделяет кнопку на фоне сайта
  • Рекомендации:
    • Используйте умеренно, не перегружайте виджет эффектами
    • Анимации эффективны для привлечения внимания
    • Тени делают виджет более заметным

Решение проблем​

Виджет не отображается на сайте​

Возможные причины:

  • Виджет выключен в настройках
  • Домен сайта не добавлен в разрешенные источники
  • Код вставлен неправильно
  • Конфликт с другими скриптами на сайте

Решение:

  1. Проверьте статус виджета (должен быть включен)
  2. Убедитесь, что домен добавлен в разрешенные источники
  3. Проверьте правильность вставки кода
  4. Проверьте консоль браузера на наличие ошибок

Виджет не отвечает на сообщения​

Возможные причины:

  • Сценарий не выбран или не готов
  • Сценарий имеет ошибки
  • Проблемы с подключением к серверу

Решение:

  1. Проверьте, что сценарий выбран и имеет статус "Готов"
  2. Протестируйте сценарий отдельно
  3. Проверьте подключение к интернету
  4. Обратитесь в поддержку при необходимости

Код для встраивания не копируется​

Решение:

  1. Обновите страницу
  2. Попробуйте скопировать код вручную
  3. Используйте другой браузер
  4. Проверьте настройки браузера (разрешения на копирование)

Виджет отображается на неправильной стороне​

Решение:

  1. Откройте редактирование виджета
  2. Измените настройку "Расположение на экране"
  3. Сохраните изменения
  4. Обновите страницу сайта

Цвета виджета не соответствуют настройкам​

Решение:

  1. Проверьте настройки акцентного цвета
  2. Очистите кеш браузера
  3. Обновите страницу сайта
  4. Проверьте, не переопределяются ли стили на сайте

Советы по использованию​

Создание эффективных виджетов​

  1. Используйте понятные названия — это поможет быстро найти нужный виджет
  2. Настройте приветственный текст — первое впечатление важно
  3. Выберите подходящий сценарий — протестируйте его перед подключением
  4. Настройте внешний вид — соответствуйте стилю вашего сайта
  5. Добавьте разрешенные источники — для безопасности

Оптимизация для разных устройств​

  • Мобильные устройства: Используйте средний или большой размер кнопки
  • Планшеты: Стандартный размер кнопки оптимален
  • Десктоп: Можно использовать любой размер, учитывайте дизайн сайта

Тестирование виджета​

  1. Создайте виджет с выключенным статусом
  2. Вставьте код на тестовую страницу
  3. Проверьте отображение и работу
  4. Включите виджет после проверки
  5. Мониторьте работу на продакшене

Безопасность​

  1. Добавляйте только свои домены в разрешенные источники
  2. Не передавайте код виджета третьим лицам
  3. Регулярно проверяйте список разрешенных источников
  4. Выключайте неиспользуемые виджеты

Производительность​

  1. Используйте умеренное количество эффектов — они могут замедлять загрузку
  2. Оптимизируйте сценарии — быстрые ответы улучшают опыт пользователя
  3. Мониторьте работу виджета — следите за временем ответа

Связанные разделы​

  • Сценарии — создание и настройка сценариев для виджетов
  • Чаты — просмотр истории общения через виджеты
  • Статистика — анализ эффективности виджетов