Вікно чату: стиль, розмір, бічна панель і телефон

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

Шаблони майстра оформлення водночас задають і ці перемикачі.

Стиль

• Заголовок — градієнт (стандартно), плоске або скло. Діє на заголовок головного екрана й рядок заголовка.
• Щільність — звичайне (стандартно), компактно або просторо. Відступи на головному екрані та в розмові.
• Бульбашки — м’яка (стандартно, відповідно до радіуса кутів), кругле (18 пікс.) або квадратне (4 пікс.).
• Тінь — м’яка (стандартно), різка або немає. Діє на вікно, а не на кнопку чату.
• Аватар — кругле (стандартно) або квадратне.
• Поле введення — плоске (стандартно) або капсула (сильно заокруглене, з круглими кнопками).
• Картки — з контуром (стандартно) або плоске. Діє на плитки головного екрана, рядки довідки й картки в розмові.

Вікно

• Розмір вікна — звичайне (стандартно, ширина 380 пікс.), широке (440 пікс.), вузьке (340 пікс.) або високе (майже вся висота екрана, щонайбільше 960 пікс.). Звичайна висота — 620 пікс., на малих екранах — менша.
• Компонування — плавуче вікно (стандартно) або бічна панель. Бічна панель займає всю висоту біля краю з боку кнопки чату й висувається звідти. Поки вона відкрита, кнопка відступає. Закривається кнопкою в заголовку.
• Тло — основа області повідомлень: простий (стандартно), крапки, сітка або градієнт (легкий відтінок кольору бренду).
• Розмір тексту — звичайне (стандартно, 14 пікс.), велике (15,5 пікс.) або мале (13 пікс.). Діє на бульбашки й поле введення, а не на кнопку чату.
• Анімація відкриття — висування (стандартно), збільшення, плавна поява або немає. Якщо відвідувач задав у системі «зменшення руху», анімація в будь-якому разі вимикається.
• Бульбашка відвідувача — колір бульбашок відвідувачів: основний колір (стандартно, світла суміш кольору бренду), акцентний колір або нейтральний (сірий). Тут віджет теж коригує текст до читабельного стану.

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

У коді

Усі перемикачі містяться в оформленні під 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 пікс. та на пристроях у горизонтальному положенні за висоти до 480 пікс. чат відкривається на весь екран: без кутів, на всю видиму висоту, навіть коли відкривається екранна клавіатура. Поле введення використовує текст 16 пікс., щоб телефон не збільшував масштаб, а кнопки мають щонайменше 44 пікс. Поки чат відкритий, кнопка чату відступає.

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