Стилізація та кастомізація віджета

Керуйте виглядом віджета через опції init або інтерфейс панелі.

Пресети розмірів#

Оберіть один із трьох вбудованих пресетів розміру через chatSize та launcherSize:

chatSize	Вікно чату
compact	340 x 460 px
default	380 x 520 px
large	420 x 600 px

launcherSize керує плаваючою кнопкою незалежно від chatSize:

launcherSize	Лаунчер	Іконка
small	48 px	22 px
default	60 px	28 px
large	68 px	32 px

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  chatSize: 'large',        // ширше й вище вікно чату
  launcherSize: 'small'     // менша плаваюча кнопка
});

Позиціонування#

Точно налаштуйте позицію віджета за допомогою offsetBottom та offsetSide (у пікселях). У поєднанні з position (bottom-right або bottom-left) це дає повний контроль над розміщенням.

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  position: 'bottom-left',
  offsetBottom: 40,          // 40px від низу (за замовчуванням: 20)
  offsetSide: 30             // 30px від лівого краю (за замовчуванням: 20)
});

Радіус скруглення та Z-Index#

borderRadius керує скругленням кутів вікна чату (за замовчуванням: 20px).zIndex задає порядок накладання (за замовчуванням: 999999).

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  borderRadius: 12,    // гостріші кути
  zIndex: 100000       // нижчий z-index, щоб уникнути конфліктів
});

Для розширеної стилізації поза вбудованими опціями передайте рядок customCSS. Він впроваджується в Shadow DOM віджета — може перевизначити будь-який стиль віджета, але не може вплинути на вашу сторінку.

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  customCSS: `
    .respondoai-chat {
      border-radius: 24px;
      box-shadow: 0 12px 48px rgba(0,0,0,0.2);
    }
    .respondoai-launcher {
      box-shadow: none;
      border: 2px solid #e5e7eb;
    }
    .respondoai-header {
      backdrop-filter: blur(10px);
    }
    .respondoai-message.assistant {
      background: #f0f9ff;
    }
    /* Стилізуйте кнопку CTA всередині карток оголошень */
    .respondoai-announcement-cta-button {
      border-radius: 999px;
      font-weight: 600;
      letter-spacing: 0.2px;
    }
    /* Розташуйте кнопки CTA оголошень у рядок замість стандартної колонки */
    .respondoai-announcement-ctas {
      flex-direction: row;
    }
  `
});

Кастомний CSS виконується всередині Shadow DOM — він повністю ізольований від стилів вашої сторінки. Ви можете безпечно перевизначати будь-який клас віджета без побічних ефектів.

Доступні CSS-класи:

Клас	Елемент
.respondoai-widget	Кореневий контейнер (позиція, z-index)
.respondoai-launcher	Плаваюча кнопка
.respondoai-chat	Вікно чату
.respondoai-header	Панель заголовка чату
.respondoai-messages	Контейнер списку повідомлень
.respondoai-message.user	Бульбашка повідомлення користувача
.respondoai-message.assistant	Бульбашка повідомлення бота
.respondoai-input-area	Контейнер панелі вводу
.respondoai-input	Поле текстового вводу
.respondoai-send	Кнопка надсилання
.respondoai-suggestion-btn	Кнопки швидких запитань
.respondoai-announcement-cta-button	Кнопка CTA всередині картки оголошення
.respondoai-announcement-ctas	Обгортка навколо кнопок CTA у картці оголошення (цільове розташування)

Ви також можете налаштувати всі опції стилізації з панелі — перейдіть до Channels → Widget → Appearance. Зміни, зроблені в панелі, надаються віджету автоматично через config API.

Стилізація та кастомізація віджета

Пресети розмірів#

Позиціонування#

Радіус скруглення та Z-Index#

Кастомний CSS#