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

​

🎛️ Обзор ваших виджетов

• Зачем больше одного? Вы можете захотеть «Бота продаж» для страницы цен и «Бота техподдержки» для справочного центра. Здесь вы управляете всеми.
• Ключевые действия для каждого виджета:
  • 📋 Копировать скрипт: Скопируйте код для вставки на ваш сайт.
  • ⚙️ Настроить: Самая интересная часть. Настройте цвета, сообщения и поведение (мы перейдём к этому далее).
  • 🗑️ Удалить: Удалите, если он больше не нужен.

​

🎨 Настройка виджета (Мастер-класс)

​

1. Основное

• AI-агент: Какой мозг управляет этим чатом? Выберите одного из ваших агентов из списка.
• Языки: Ваш сайт говорит на русском, английском и французском? Сообщите виджету, чтобы он не выглядел глупо.

​

2. Всплывающее сообщение (Крючок 🪝)

• Скучно: «Чат здесь.»
• Лучше: «Привет! Нужна помощь с заказом? 👋»

⚠️ Внимание: Добавьте переводы для всех языков. Вы не хотите, чтобы англоязычные посетители видели пустой пузырёк!

​

3. Внешний вид (Оденьтесь по моде)

• Заголовок: Выберите, что показывать вверху. Просто заголовок? Ваш логотип? Аватар робота в монокле? Решать вам.
• Цвета: Используйте пипетку 🖊️ для точного соответствия вашему бренду.
  • Основной цвет: Пузырьки сообщений и кнопка отправки.
  • Цвет текста: Убедитесь, что он читаемый! Жёлтый текст на белом фоне — преступление против зрения.

​

4. Сборщик данных: Формы сбора информации 📝

• Спросите Имя, Email или Телефон.
• Сделайте поля «Обязательными», если вы строги, или «Необязательными», если более лояльны.
• GDPR / Конфиденциальность: Добавьте ссылку на вашу политику, чтобы оставаться в рамках закона. 👮‍♂️

​

5. Умный сбор данных (Продвинутый 🤓)

• Как это помогает: Если пользователь авторизован, виджет может сказать «Привет, Иван!» вместо запроса имени.
• Настройка: Вы указываете нам «Ключ» (например, user_email), и мы автоматически получаем значение.

​

🛠️ Дополнительные настройки и расположение

• Позиция: Слева или Справа? (Справа — стандарт, Слева — для бунтарей).
• Полный экран: Хотите, чтобы чат занял весь мобильный экран? Включите это.
• Встроенный (DOM-элемент): Вместо плавающего пузырька, закрепите чат постоянно внутри <div> на странице. Отлично для страниц «Свяжитесь с нами».
• Пользовательский CSS: Если вы знаете код, можете написать собственные стили для переопределения наших. Небо — это предел.

​

🎨 Пользовательский CSS — Руководство дизайнера

​

⚙️ Как это работает изнутри

1. Ваш CSS сохраняется вместе с конфигурацией виджета.
2. Когда виджет загружается на сайте посетителя, ваш CSS внедряется как тег <style> внутри самого виджета.
3. Он загружается после наших стилей по умолчанию, поэтому ваши правила имеют последнее слово (побеждают при равенстве).

🎯 Важно — Область действия: Пользовательский CSS влияет только на внутреннюю часть чата виджета, а не на остальную часть вашей веб-страницы. Вы не можете использовать его для изменения стиля вашего сайта; только виджета. И наоборот: стили вашего сайта не проникают в виджет, так что вы начинаете с чистого холста.

💪 Моё правило не применяется? Поскольку наши базовые стили специфичны, иногда ваше правило «ничья» и не побеждает. Если изменение не даёт эффекта, добавьте !important в конце свойства (например, border-radius: 0 !important;) или используйте более специфичный селектор.

​

🧩 Селекторы, которые вы можете использовать

​

💡 Практические примеры

.widget_message_bot {
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.widget_message_content {
  font-size: 16px !important;
  line-height: 1.5;
}

.widget_chat_window_header {
  background: linear-gradient(90deg, #6a11cb, #2575fc) !important;
}

.widget_chat_window_footer {
  padding: 14px !important;
}

🧪 Всегда тестируйте в Playground (см. ниже) перед публикацией. Забытая } может сломать несколько стилей сразу.

​

🧪 Тест-драйв (Playground)

• Цвета не конфликтуют?
• Агент ведёт себя вежливо?
• Форма работает?