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

Персонализируйте внешний вид вашего чат-виджета в соответствии с брендом и дизайном сайта.

Настройки

Все параметры настройки виджета доступны в разделе Настройки → Каналы → Web. Выберите веб-канал и откройте вкладку Внешний вид.

Цвет темы

Цвет темы применяется единообразно ко всему виджету:

Фон кнопки запуска
Фон панели заголовка
Цвет кнопки отправки
Цвет подсветки ссылок
Фон пузырька сообщения пользователя

Выберите цвет, соответствующий фирменному стилю и обеспечивающий хороший контраст с белым текстом.

Приветственное сообщение

Приветственное сообщение — это первый текст, который видят клиенты при открытии виджета. Сделайте его дружелюбным и чётко объясните, чем может помочь бот.

Примеры:

«Привет! Чем могу помочь сегодня?»
«Добро пожаловать в поддержку Acme. Задайте вопрос о наших продуктах и услугах.»
«Здравствуйте! Я здесь, чтобы помочь. Чем могу быть полезен?»

Положение виджета

Положение	Значение настройки	Когда использовать
Внизу справа	`bottom-right` (по умолчанию)	Стандартное расположение, подходит для большинства сайтов
Внизу слева	`bottom-left`	Когда правая сторона конфликтует с другими элементами

Аватар

v1.6.4

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

Через панель управления: Укажите URL аватара в разделе Настройки → Каналы → Web → Кастомизатор → URL аватара.

Через код встраивания: Передайте avatarUrl в конфигурации темы:

<script>
  window.ClientaConfig = {
    botId: "YOUR_BOT_ID",
    widgetId: "YOUR_WIDGET_ID",
    theme: {
      avatarUrl: "https://example.com/your-logo.png"
    }
  };
</script>

Требования:

Должен быть URL с https:// (URL с http, data: и javascript: отклоняются из соображений безопасности)
Рекомендуемый размер: 128 × 128 пикселей (квадрат)
Поддерживаемые форматы: PNG, JPG, WebP, SVG
Если URL недействителен или изображение не загружается, отображается значок по умолчанию

Режим приветствия

v1.6.2

Приветственное сообщение поддерживает три языковых режима. Перейдите в Настройки → Каналы → Web → Кастомизатор и найдите раздел Режим приветствия.

Статичный

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

Введите одно приветствие в текстовом поле. Пример: «Привет! Чем могу помочь сегодня?»

По посетителю (locale)

Показывайте разное приветствие для каждого языка. Виджет определяет язык посетителя и показывает соответствующее приветствие.

Выберите режим По посетителю.
Появится поле для каждой из 15 поддерживаемых локалей.
Заполните текст приветствия для каждого нужного языка.
Оставьте поле локали пустым, чтобы использовать статичное приветствие для этого языка.

Пример настройки:

Тайский: «สวัสดีค่ะ! มีอะไรให้ช่วยไหม?»
Английский: «Hi! How can I help you today?»
Японский: «こんにちは！何かお手伝いできますか？»

Org-Main

Приветствие всегда отображается на основном языке ответов организации, независимо от языка посетителя. В этом режиме используется язык, заданный в Настройки ИИ → Основной язык ответов.

Используйте Org-Main, когда команда работает на одном языке и вы хотите, чтобы все приветствия были одинаковыми.

Выбор языка

v1.6.2

Выбор языка добавляет значок глобуса (🌐) в заголовок виджета, чтобы посетители могли явно выбрать язык. По умолчанию отключён.

Для включения: В разделе Настройки → Каналы → Web → Кастомизатор переключите Показывать выбор языка в положение ВКЛ.

Когда посетитель выбирает язык из выпадающего списка:

Все ответы ИИ фиксируются на этом языке на протяжении сессии
Блокировка переопределяет автоопределение, даже если посетитель пишет на другом языке
Интерфейс виджета переключается на выбранный язык

См. Веб-виджет — Выбор языка для полного описания поведения.

Язык по умолчанию

v1.6.8

Задайте язык по умолчанию для виджета, чтобы посетители видели интерфейс на предпочтительной локали ещё до автоопределения. Перейдите в Настройки → Каналы → Web → Кастомизатор → Язык по умолчанию и выберите из выпадающего списка.

Приоритет языка:

Принудительный язык (Настройки ИИ) — переопределяет всё при включении
Явный выбор посетителя (через выбор языка, если включён)
Язык по умолчанию — данная настройка
Локаль в коде встраивания — значение locale в коде встраивания
Тайский — запасной вариант, если ничего не задано

Выберите «Нет — использовать код встраивания», чтобы пропустить эту настройку и опираться на значение локали из кода встраивания.

Тёмный режим и CSS-переменные

v1.6.8

Виджет поддерживает встроенное переключение тёмного режима, которое посетители могут активировать из заголовка чата. Весь интерфейс виджета оформлен с помощью пользовательских CSS-свойств, обеспечивая согласованный вид в обоих режимах.

Основные CSS-переменные

Переменная	Описание
`--cw-primary`	Основной фирменный цвет (из настройки цвета темы)
`--cw-primary-rgb`	RGB-компоненты основного цвета, используемые для эффектов прозрачности
`--cw-bg`	Цвет фона виджета
`--cw-bg-secondary`	Вторичный фон (поля ввода, элементы форм)
`--cw-surface`	Цвет поверхности карточек, всплывающих подсказок, фрагментов цитат
`--cw-text`	Основной цвет текста
`--cw-text-secondary`	Вторичный/приглушённый цвет текста
`--cw-border`	Цвет границы для разделителей и контуров полей ввода

При переключении тёмного режима виджет добавляет класс cw-dark или cw-light к корневому контейнеру, и все CSS-переменные обновляются автоматически. Градиентный заголовок, пузырьки сообщений, форма обратной связи и чипы цитат учитывают текущий режим.

Предварительный просмотр

После внесения изменений используйте панель Живой предпросмотр в правой части страницы настроек, чтобы увидеть, как виджет будет выглядеть на вашем сайте, — до сохранения.

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

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

Настройки

Цвет темы

Приветственное сообщение

Положение виджета

Аватар

Режим приветствия

Статичный

По посетителю (locale)

Org-Main

Выбор языка

Язык по умолчанию

Тёмный режим и CSS-переменные

Основные CSS-переменные

Предварительный просмотр

Советы