Перейти к основному содержимому

События виджета

JavaScript API​

После инициализации доступен глобальный объект smaiwer.

Методы​

Открытие/закрытие​

// Открыть виджет
smaiwer('open');

// Закрыть виджет
smaiwer('close');

// Переключить состояние
smaiwer('toggle');

Отправка сообщения​

// Отправить сообщение от имени пользователя
smaiwer('sendMessage', 'Привет! Хочу узнать про доставку');

Установка данных пользователя​

// Передать данные о пользователе
smaiwer('setUser', {
  name: 'Иван Петров',
  email: 'ivan@example.com',
  phone: '+79991234567',
  customData: {
    userId: '12345',
    plan: 'premium'
  }
});

Скрытие/показ​

// Скрыть виджет полностью
smaiwer('hide');

// Показать виджет
smaiwer('show');

// Скрыть только кнопку
smaiwer('hideButton');

// Показать кнопку
smaiwer('showButton');

Уничтожение​

// Удалить виджет со страницы
smaiwer('destroy');

События (Callbacks)​

Подписка на события​

smaiwer('on', 'eventName', callback);

Доступные события​

open​

Виджет открыт.

smaiwer('on', 'open', () => {
  console.log('Widget opened');
  analytics.track('chat_opened');
});

close​

Виджет закрыт.

smaiwer('on', 'close', () => {
  console.log('Widget closed');
});

message:sent​

Пользователь отправил сообщение.

smaiwer('on', 'message:sent', (data) => {
  console.log('Message sent:', data.text);
});

message:received​

Получено сообщение от оператора.

smaiwer('on', 'message:received', (data) => {
  console.log('Message received:', data.text);
  
  // Показать браузерное уведомление если виджет закрыт
  if (!isWidgetOpen) {
    showNotification('Новое сообщение', data.text);
  }
});

lead:submitted​

Форма сбора контактов заполнена.

smaiwer('on', 'lead:submitted', (data) => {
  console.log('Lead data:', data);
  // { name: 'Иван', email: 'ivan@example.com', phone: '+7...' }
  
  // Отправить в CRM
  sendToCRM(data);
});

ready​

Виджет загружен и готов к работе.

smaiwer('on', 'ready', () => {
  console.log('Widget is ready');
  
  // Теперь можно вызывать методы
  smaiwer('setUser', { name: currentUser.name });
});

Отписка от событий​

const handler = (data) => console.log(data);

// Подписка
smaiwer('on', 'message:received', handler);

// Отписка
smaiwer('off', 'message:received', handler);

Примеры интеграции​

Аналитика​

smaiwer('on', 'open', () => {
  gtag('event', 'chat_open', {
    event_category: 'engagement'
  });
});

smaiwer('on', 'message:sent', (data) => {
  gtag('event', 'chat_message', {
    event_category: 'engagement',
    event_label: 'user_message'
  });
});

smaiwer('on', 'lead:submitted', (data) => {
  gtag('event', 'generate_lead', {
    event_category: 'conversion',
    value: 1
  });
});

Интеграция с CRM​

smaiwer('on', 'lead:submitted', async (data) => {
  await fetch('/api/crm/leads', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      source: 'smaiwer_widget',
      ...data
    })
  });
});

Открытие по триггеру​

// Открыть виджет через 30 секунд на странице
setTimeout(() => {
  smaiwer('open');
}, 30000);

// Открыть при попытке уйти со страницы
document.addEventListener('mouseleave', (e) => {
  if (e.clientY < 0) {
    smaiwer('open');
  }
}, { once: true });

// Открыть по клику на кнопку
document.getElementById('help-btn').addEventListener('click', () => {
  smaiwer('open');
  smaiwer('sendMessage', 'Нужна помощь с заказом');
});