Виджет / Бренд

Бренд и шапка

Цвет акцента, лого, тема, аватары команды, фон, иконки, кастомные эмодзи реакций.

Где настраивается

SettingsWidget BuilderBrand. Все изменения уезжают в cfg.brand; превью обновляется live, кнопка Publish переносит черновик в эфир.

Базовые поля

accent_color

Тип: stringПо умолчанию: #6366f1

Hex-цвет акцента: FAB, кнопки «Задать вопрос» и «Отправить», индикаторы. Бэкенд валидирует формат #RRGGBB.

theme

Тип: "light" | "dark" | "auto"По умолчанию: "auto"

Цветовая тема панели. auto следует за системными настройками посетителя через prefers-color-scheme.

logo_url

Тип: stringПо умолчанию: —

Логотип в шапке. В Builder секция Brand содержит file uploader — загруженный PNG / JPEG / WebP / SVG (до 256 КБ) идёт через POST /api/workspaces/{ws}/widget-config/logo и встраивается в конфиг как data: URL. Для CDN-хостинга используйте раскрывашку «Внешний URL» — принимается обычная https-ссылка на картинку.

logo_shape

Тип: "circle" | "rounded" | "square"По умолчанию: "rounded"

Форма контейнера логотипа в шапке. circle — для лиц / маскотов; rounded — стандартный плиточный логотип с 8px-скруглением; square — острые углы.

logo_transparent_bg

Тип: booleanПо умолчанию: false

Убирает акцентную плитку под логотипом и переключает object-fit на contain вместо cover. Включайте если ваш PNG/SVG приходит со своим фоном — иначе вокруг логотипа появится цветная рамка.

header_title

Тип: stringПо умолчанию: "Поддержка"

Подпись справа от лого в шапке. Длина до 200 символов; на узком экране переносится на следующую строку, не обрезается ellipsis'ом.

project_name

Тип: stringПо умолчанию: —

Название продукта. Если задано и отличается от header_title, рендерится второй строкой меньшим кеглем (как «компания / отдел»).

header_subtitle

Тип: stringПо умолчанию: —

Подпись под title — слоган, контакт-инфо, чем занимается команда.

position

Тип: "left" | "right"По умолчанию: "right"

В каком углу появляется FAB.

border_radius

Тип: number (0–32)По умолчанию: 16

Радиус скругления панели и FAB. 0 — острые углы,32 — максимально круглые. На мобильном fullscreen-overlay это значение игнорируется (overlay всегда занимает весь экран).

show_branding

Тип: booleanПо умолчанию: true

Показывать ли «Powered by SupportHub» в подвале панели. Скрыть — фича доступна на тарифах с custom-branding.

Поле	Тип	По умолчанию	Описание
accent_color	string	#6366f1	Hex-цвет акцента: FAB, кнопки «Задать вопрос» и «Отправить», индикаторы. Бэкенд валидирует формат `#RRGGBB`.
theme	"light" \| "dark" \| "auto"	"auto"	Цветовая тема панели. `auto` следует за системными настройками посетителя через `prefers-color-scheme`.
logo_url	string	—	Логотип в шапке. В Builder секция Brand содержит file uploader — загруженный PNG / JPEG / WebP / SVG (до 256 КБ) идёт через `POST /api/workspaces/{ws}/widget-config/logo` и встраивается в конфиг как `data:` URL. Для CDN-хостинга используйте раскрывашку «Внешний URL» — принимается обычная https-ссылка на картинку.
logo_shape	"circle" \| "rounded" \| "square"	"rounded"	Форма контейнера логотипа в шапке. `circle` — для лиц / маскотов; `rounded` — стандартный плиточный логотип с 8px-скруглением; `square` — острые углы.
logo_transparent_bg	boolean	false	Убирает акцентную плитку под логотипом и переключает `object-fit` на `contain` вместо `cover`. Включайте если ваш PNG/SVG приходит со своим фоном — иначе вокруг логотипа появится цветная рамка.
header_title	string	"Поддержка"	Подпись справа от лого в шапке. Длина до 200 символов; на узком экране переносится на следующую строку, не обрезается ellipsis'ом.
project_name	string	—	Название продукта. Если задано и отличается от `header_title`, рендерится второй строкой меньшим кеглем (как «компания / отдел»).
header_subtitle	string	—	Подпись под title — слоган, контакт-инфо, чем занимается команда.
position	"left" \| "right"	"right"	В каком углу появляется FAB.
border_radius	number (0–32)	16	Радиус скругления панели и FAB. `0` — острые углы,`32` — максимально круглые. На мобильном fullscreen-overlay это значение игнорируется (overlay всегда занимает весь экран).
show_branding	boolean	true	Показывать ли «Powered by SupportHub» в подвале панели. Скрыть — фича доступна на тарифах с custom-branding.

Аватары команды

В шапке диалога рендерится «триангл» из 3 кружков с лицами команды — посетитель сразу видит, что за продукт он пишет реальным людям. Поведение:

Если brand.team_avatars содержит ≥2 записей с avatar_url → рендерится триангл из этих аватарок (первые 3, перекрытие 30%).
Если меньше двух — fallback на одиночный квадратный логотип logo_url. Триплицировать одно и то же лицо мы намеренно не стали — выглядит как баг, а не «команда».

team_avatars[].name

Тип: stringПо умолчанию: —

Имя для tooltip и initials-fallback на чипе.

team_avatars[].avatar_url

Тип: stringПо умолчанию: —

URL квадратной аватарки. Если пусто — место в триангле занимает буква-fallback.

team_avatars[].online

Тип: booleanПо умолчанию: false

Зарезервировано для будущего «зелёный кружок» индикатора онлайна.

Поле	Тип	По умолчанию	Описание
team_avatars[].name	string	—	Имя для tooltip и initials-fallback на чипе.
team_avatars[].avatar_url	string	—	URL квадратной аватарки. Если пусто — место в триангле занимает буква-fallback.
team_avatars[].online	boolean	false	Зарезервировано для будущего «зелёный кружок» индикатора онлайна.

Фон панели

brand.background — расширенный фон под основным контентом виджета. Поддерживает 4 типа:

solid — однотонный hex (обычно близкий к accent_color или к фирменному вторичному).
gradient — линейный/радиальный градиент по двум hex'ам.
pattern — повторяющийся SVG-паттерн (точки, сетка, кириллический орнамент).
image — URL картинки; растягивается cover, не повторяется.

Контраст текста рассчитывается клиентом — если фон сильно тёмный, текст автоматически светлеет, и наоборот.

Иконки и эмодзи

Icon pack

brand.icon_pack_url — URL JSON со списком кастомных иконок (формат описан в справочнике cfg). По умолчанию виджет использует Lucide-иконки в одном стиле. Подменять имеет смысл, если у вас уже свой icon-set и вы хотите, чтобы chevron в виджете совпадал с chevron'ом на сайте.

Реакции (emoji_pack)

brand.emoji_pack_id — список из 4 эмодзи, которые посетитель видит на long-press по сообщению оператора. По умолчанию: ❤️ 👍 👎 🎉. Чтобы заменить — впишите через запятую:

❤️,🔥,👍,🎉

Если ввели меньше 4-х — недостающие слоты добиваются дефолтами. Если больше — лишние обрезаются. Учитывайте, что emoji «ZWJ-склейки» (✋🏿, 🏳️‍🌈) корректно поддерживаются — их не разделит сплит по запятой.

Реакции работают через long-press 350ms или hover 600ms — пользователю не нужно ничего изучать, паттерн знакомый по Telegram/iMessage.

Была ли страница полезной?