Кастомизация виджета

Настройка через панель

Большинство настроек доступны в Настройки → Виджет:

Параметр	Описание
Цвет	Основной цвет виджета
Позиция	Левый/правый угол
Приветствие	Текст при открытии
Быстрые кнопки	Готовые варианты ответов
Форма лидов	Сбор контактов

Программная кастомизация

Цвета и стили

smaiwer('init', 'org-id', {
  colors: {
    primary: '#6366f1',      // Основной цвет
    text: '#1f2937',         // Цвет текста
    background: '#ffffff'    // Фон
  },
  borderRadius: 16,          // Скругление углов (px)
  fontFamily: 'Inter, sans-serif'
});

Позиция и отступы

smaiwer('init', 'org-id', {
  position: 'right',         // 'left' | 'right'
  offsetX: 20,               // Отступ от края (px)
  offsetY: 20                // Отступ снизу (px)
});

Кнопка чата

smaiwer('init', 'org-id', {
  button: {
    size: 60,                // Размер кнопки (px)
    icon: 'chat',            // 'chat' | 'message' | 'custom'
    customIcon: 'https://...'// URL кастомной иконки
  }
});

Локализация

smaiwer('init', 'org-id', {
  locale: 'ru',
  texts: {
    welcomeMessage: 'Привет! Чем помочь?',
    inputPlaceholder: 'Напишите сообщение...',
    sendButton: 'Отправить',
    poweredBy: 'Работает на SMAIWER'
  }
});

Быстрые кнопки

Через панель

Добавьте в Настройки → Виджет → Быстрые кнопки:

[
  {"text": "Узнать цены", "value": "Хочу узнать цены"},
  {"text": "Связаться", "value": "Хочу связаться с менеджером"}
]

Программно

smaiwer('init', 'org-id', {
  quickButtons: [
    { text: 'Узнать цены', value: 'Хочу узнать цены' },
    { text: 'Связаться', value: 'Хочу связаться' }
  ]
});

Форма сбора контактов

Включение

smaiwer('init', 'org-id', {
  leadForm: {
    enabled: true,
    title: 'Представьтесь, пожалуйста',
    fields: [
      { name: 'name', label: 'Имя', required: true },
      { name: 'email', label: 'Email', required: true },
      { name: 'phone', label: 'Телефон', required: false }
    ],
    submitText: 'Начать чат',
    privacyLink: 'https://site.com/privacy'
  }
});

Получение данных

Данные формы отправляются с первым сообщением и доступны в панели оператора.

CSS переопределение

Для глубокой кастомизации используйте CSS:

/* Кнопка виджета */
.smaiwer-button {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* Окно чата */
.smaiwer-chat {
  max-height: 600px !important;
}

/* Сообщения */
.smaiwer-message-user {
  background: #6366f1 !important;
}

.smaiwer-message-operator {
  background: #f3f4f6 !important;
}

Важно

CSS классы могут измениться в будущих версиях. Используйте программные настройки когда возможно.

Адаптивность

Мобильные устройства

smaiwer('init', 'org-id', {
  mobile: {
    fullScreen: true,        // Полноэкранный режим
    hideButton: false,       // Скрыть кнопку на мобильных
    breakpoint: 768          // Точка перехода (px)
  }
});

Скрытие на определённых страницах

// Не показывать на странице чекаута
if (window.location.pathname !== '/checkout') {
  smaiwer('init', 'org-id');
}