Окно чата: стиль, размер, боковая панель и мобильный вид

Цвета задают характер, а форма дополняет его. В /app/projects/{id} на вкладке Внешний вид, в разделе Оформление, есть две группы переключателей: Стиль (форма, а не цвет) и Окно (как выглядит открытое окно). Если ничего не выбирать, остаются значения по умолчанию. Сохранение — кнопкой Сохранить; предпросмотр в Главном экране виджета показывает настоящий виджет.

Шаблоны помощника по дизайну одновременно задают и эти переключатели.

Стиль

• Заголовок — градиент (по умолчанию), плоское или стекло. Применяется к заголовку главного экрана и строке заголовка.
• Плотность — обычное (по умолчанию), компактно или просторно. Отступы на главном экране и в разговоре.
• Облачки — мягкая (по умолчанию, следует вашему скруглению), круглое (18 px) или квадратное (4 px).
• Тень — мягкая (по умолчанию), резкая или нет. Действует на окно, а не на кнопку чата.
• Аватар — круглое (по умолчанию) или квадратное.
• Поле ввода — плоское (по умолчанию) или капсула (сильное скругление и круглые кнопки).
• Карточки — с контуром (по умолчанию) или плоское. Применяется к плиткам главного экрана, строкам помощи и карточкам в разговоре.

Окно

• Размер окна — обычное (по умолчанию, ширина 380 px), широкое (440 px), узкое (340 px) или высокое (почти на всю высоту экрана, не более 960 px). Обычная высота — 620 px, на небольших экранах меньше.
• Макет — плавающее окно (по умолчанию) или боковая панель. Боковая панель занимает всю высоту у края со стороны кнопки чата и выдвигается оттуда. Пока она открыта, кнопка уходит на задний план. Закрывается кнопкой в заголовке.
• Фон — подложка области сообщений: простой (по умолчанию), точки, сетка или градиент (лёгкий оттенок фирменного цвета).
• Размер текста — обычное (по умолчанию, 14 px), большое (15,5 px) или малое (13 px). Применяется к облачкам и вводу, а не к кнопке чата.
• Анимация открытия — выдвижение (по умолчанию), увеличение, плавное появление или нет. Если посетитель включил уменьшение движения в системе, анимация в любом случае отключается.
• Облачко посетителя — цвет облачков посетителей: основной цвет (по умолчанию, светлая смесь фирменного цвета), акцентный цвет или нейтральный (серый). Здесь виджет тоже пересчитывает текст до достижения читаемости.

Размер и макет окна действуют только при ширине экрана от 481 px. Ниже чат всегда открывается на весь экран (см. ниже).

В коде

Все переключатели находятся в оформлении под stil. Значения — внутренние имена:

• kopf: verlauf, flach, glas
• dichte: normal, kompakt, luftig
• blase: weich, rund, eckig
• schatten: weich, hart, keiner
• avatar: rund, eckig
• eingabe: flach, pille
• karten: rahmen, flach
• fenster: normal, breit, schmal, hoch
• ansicht: schwebend, seite
• hintergrund: schlicht, punkte, raster, verlauf
• schrift: normal, gross, klein
• animation: gleiten, zoom, blenden, keine
• besucher: marke, akzent, neutral

Неизвестное значение заменяется значением по умолчанию.

ReactiveChat('setBrand', { stil: { ansicht: 'seite', hintergrund: 'punkte', schrift: 'gross' } });

Если оформление задано в коде как data-rc-brand='{"stil":{"ansicht":"seite"}}', оно считается собственным оформлением страницы и имеет приоритет над аккаунтом; см. Цвета, шрифт и тема.

Движение

Атрибут data-rc-motion в коде встраивания управляет анимациями: auto (по умолчанию, следует системной настройке посетителя), reduced (без движения) или full.

data-rc-motion="reduced"

Заголовок

Заголовок показывает, кто отвечает:

• Если пишет сотрудник команды, показано его отображаемое имя. Каждый участник команды задаёт его в личных настройках; см. Команда, консоль и уведомления.
• Если отвечает ИИ-ассистент, показано его имя из ИИ и знания → Ассистент (по умолчанию «Ada»); см. ИИ-ассистент.
• Иначе — заголовок «Чат». Его и вторую строку («Мы на связи», «ИИ-ассистент») можно изменить в Текстах и языках с ключами header.title, header.subtitle_online и header.subtitle_bot.

Аватары показывают первую букву имени, а у ассистента — знак ✦. Собственные фотографии участников команды сейчас сохранить нельзя.

В заголовке также есть значок конверта, через который посетители могут получить переписку по электронной почте. Он отключается в Правила и обслуживание → Переписка на почту; см. Доступность, формы и обслуживание.

Упоминание «Powered by reactive.chat»

На бесплатном тарифе внизу окна появляется надпись «Powered by reactive.chat». Начиная с платного тарифа, вы сами решаете это в Внешний вид → reactive.chat в чате переключателем Скрыть «Powered by reactive.chat». Тогда значение по умолчанию — скрыто. Изменить текст надписи нельзя.

На телефонах

При ширине до 480 px, а также на устройствах в альбомной ориентации при высоте до 480 px чат открывается на весь экран: без скруглений, на всю видимую высоту, даже при появлении экранной клавиатуры. Поле ввода использует текст 16 px, чтобы телефон не увеличивал масштаб, а кнопки имеют размер не менее 44 px. Пока чат открыт, кнопка чата уходит на задний план.

Размер окна и боковая панель на телефонах не действуют. Остальные переключатели стиля, цвета и размер текста действуют. Размер кнопки на телефонах задаётся в разделе Кнопка чата.