# Як керувати віджетом з сайту

ConnectiveOne віджет надає JavaScript API для програмного керування поведінкою віджету з вашого сайту. Це дозволяє відкривати/закривати чат, змінювати заголовок, передавати події до сценарію та інтегрувати віджет з вашим сайтом.

## Відкриття та закриття чату

### Відкрити чат

```javascript
kw_event('openchat', 1);
```

### Закрити чат

```javascript
kw_event('openchat', 0);
```

**Приклад використання:**

```javascript
// Відкрити чат при кліку на кнопку
document.getElementById('open-chat-btn').addEventListener('click', function() {
  kw_event('openchat', 1);
});

// Закрити чат при кліку на кнопку
document.getElementById('close-chat-btn').addEventListener('click', function() {
  kw_event('openchat', 0);
});
```

## Зміна заголовка та підзаголовка

Оновіть заголовок та підзаголовок чату:

```javascript
kw_event('command', {
  title: "Новий заголовок",
  subtitle: "Новий підзаголовок"
});
```

**Приклад використання:**

```javascript
// Змінити заголовок при переході на іншу сторінку
if (window.location.pathname === '/products') {
  kw_event('command', {
    title: "Питання про товари",
    subtitle: "Наші консультанти допоможуть"
  });
}
```

## Перехід до точки входу в сценарій

Викликайте конкретний alias в сценарії:

```javascript
kw_event('emitevent', {
  event: 'alias',
  alias: 'test-alias'
});
```

**Приклад використання:**

```javascript
// Перехід до сценарію про продукт при кліку
document.getElementById('product-inquiry-btn').addEventListener('click', function() {
  kw_event('emitevent', {
    event: 'alias',
    alias: 'product-inquiry'
  });
  kw_event('openchat', 1); // Відкрити чат
});
```

## Збереження стану чату

Збережіть стан чату в localStorage для відновлення після перезавантаження:

```javascript
kw_event('widgetstatus', 1);
```

Після виконання в `localStorage` зберігається:
- `isChatOpen` — стан віджета (згорнутий/розгорнутий)
- `connectState` — стан підключення оператора

**Відновлення стану:**

```javascript
// Перевірка збереженого стану
const savedStatus = localStorage.getItem('kw_widget_status');
if (savedStatus) {
  const status = JSON.parse(savedStatus);
  if (status.isChatOpen) {
    kw_event('openchat', 1);
  }
}
```

## Слухання подій віджету

Ви можете слухати події віджету для інтеграції з вашим сайтом:

```javascript
// Чат відкрито
document.addEventListener("widgetChatOpened", function(event) {
  console.log('Чат відкрито', event);
  // Ваш код обробки
  // Наприклад, відстеження в Google Analytics
  if (window.gtag) {
    window.gtag('event', 'widget_chat_opened');
  }
});

// Чат закрито
document.addEventListener("widgetChatClosed", function(event) {
  console.log('Чат закрито', event);
  // Ваш код обробки
});
```

## Комбінування дій

Ви можете комбінувати різні дії для складних сценаріїв:

```javascript
// Відкрити чат, змінити заголовок та перейти до alias
function openProductChat(productId) {
  kw_event('kwsetparamsfromsite', {
    params_from_site: {
      product_id: productId,
      action: 'product_inquiry'
    }
  });
  kw_event('command', {
    title: "Питання про товар",
    subtitle: "Наш консультант допоможе"
  });
  kw_event('emitevent', {
    event: 'alias',
    alias: 'product-inquiry'
  });
  kw_event('openchat', 1);
}

// Використання
document.getElementById('product-btn').addEventListener('click', function() {
  openProductChat('12345');
});
```

## Обмеження

- Віджет повинен бути ініціалізований перед викликом `kw_event`
- Деякі дії можуть не працювати, якщо віджет не завантажений
- Рекомендується перевіряти наявність функції `kw_event` перед викликом

## Пов'язані статті

- [JavaScript API для керування віджетом](/uk/channels/explanation/widget-javascript-api.md)
- [Робота з SPA додатками](/uk/channels/how-to/work-with-widget-spa.md)
- [Передача параметрів з сайту до сценарію](/uk/channels/how-to/pass-parameters-from-widget.md)
- [Обмін даними з виджетом](/uk/integrations/explanation/what-are-integrations.md#обмін-даними-з-виджетом)