# Як використовувати Custom Code для віджету

Custom Code дозволяє додати кастомний JavaScript код, який виконується перед ініціалізацією віджету. Це корисно для інтеграції з третіми сторонами (Google Analytics, Intercom), модифікації параметрів віджету та створення глобальних helper функцій.

## Що таке Custom Code?

Custom Code — це JavaScript код, який:
- Виконується перед ініціалізацією Vue компонентів віджету
- Має доступ до `embed_state`, `kw_event()`, `kw_event_trigger()`
- Може модифікувати параметри віджету перед ініціалізацією
- Підтримує Event Queue для обробки подій, що виникли до завантаження коду

## Де налаштувати Custom Code?

1. Перейдіть в **Налаштування → Боти → оберіть бота → Widget**
2. Знайдіть розділ **Custom Code**
3. Введіть ваш JavaScript код
4. Збережіть налаштування

## Доступні об'єкти

В Custom Code доступні:

- **`embed_state`** — стан віджету перед ініціалізацією (можна модифікувати)
- **`kw_event()`** — функція для виклику подій
- **`kw_event_trigger()`** — функція для тригеру подій
- **`window`** — глобальний об'єкт браузера

## Модифікація параметрів віджету

Змініть параметри віджету перед ініціалізацією:

```javascript
// Додати параметри на основі URL
embed_state.params_from_site = {
  ...embed_state.params_from_site,
  page_url: window.location.href,
  page_path: window.location.pathname,
  user_agent: navigator.userAgent
};

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

## Інтеграція з Google Analytics

Відстежуйте події віджету в Google Analytics:

```javascript
// Перевірка наявності Google Analytics
if (window.gtag) {
  // Відстеження відкриття чату
  window.addEventListener('widgetChatOpened', function() {
    window.gtag('event', 'widget_chat_opened', {
      event_category: 'Widget',
      event_label: 'Chat Opened'
    });
  });

  // Відстеження закриття чату
  window.addEventListener('widgetChatClosed', function() {
    window.gtag('event', 'widget_chat_closed', {
      event_category: 'Widget',
      event_label: 'Chat Closed'
    });
  });
}
```

## Інтеграція з Intercom

Інтегруйте віджет з Intercom:

```javascript
// Перевірка наявності Intercom
if (window.Intercom) {
  window.addEventListener('widgetChatOpened', function() {
    window.Intercom('trackEvent', 'widget-chat-opened');
  });
}
```

## Використання Event Queue

Обробляйте події, що виникли до завантаження Custom Code:

```javascript
// Встановити обробник подій
window.__kw_custom_handler_ready = true;

// Обробити накопичені події
if (window.__kw_event_queue && window.__kw_event_queue.length > 0) {
  window.__kw_event_queue.forEach(function(event) {
    // Ваша обробка події
    console.log('Обробка події:', event.event_name, event.event_data);
  });
  
  // Очистити чергу
  window.__kw_event_queue = [];
}
```

## Створення helper функцій

Створіть глобальні функції для спрощення інтеграції:

```javascript
// Створити helper функцію для відкриття чату з продуктом
window.openProductChat = function(productId, productName) {
  kw_event('kwsetparamsfromsite', {
    params_from_site: {
      product_id: productId,
      product_name: productName,
      action: 'product_inquiry'
    }
  });
  kw_event('command', {
    title: 'Питання про товар',
    subtitle: productName
  });
  kw_event('emitevent', {
    event: 'alias',
    alias: 'product-inquiry'
  });
  kw_event('openchat', 1);
};

// Використання на сайті
// <button onclick="openProductChat('12345', 'iPhone 15')">Запитати про товар</button>
```

## Динамічна конфігурація на основі URL

Налаштуйте віджет залежно від поточної сторінки:

```javascript
// Аналіз URL та зміна конфігурації
const path = window.location.pathname;
const searchParams = new URLSearchParams(window.location.search);

// Зміна заголовка залежно від сторінки
if (path.startsWith('/products')) {
  embed_state.title = 'Питання про товари';
} else if (path.startsWith('/support')) {
  embed_state.title = 'Технічна підтримка';
} else {
  embed_state.title = 'Допомога';
}

// Додавання параметрів з URL
if (searchParams.has('utm_source')) {
  embed_state.params_from_site = {
    ...embed_state.params_from_site,
    utm_source: searchParams.get('utm_source'),
    utm_campaign: searchParams.get('utm_campaign')
  };
}
```

## Обробка помилок

Custom Code обгортається в IIFE, тому помилки не ламають віджет:

```javascript
try {
  // Ваш код
  if (window.someExternalService) {
    window.someExternalService.init();
  }
} catch (error) {
  console.error('Помилка в Custom Code:', error);
  // Помилка не вплине на роботу віджету
}
```

## Обмеження

- Код завантажується тільки якщо `widget_custom_code: true` та вказано `engine_url` при ініціалізації
- Код виконується синхронно перед ініціалізацією Vue компонентів
- Якщо параметр вже встановлений в `kw('init', {...})`, значення з `embed_state` може бути перезаписане
- Рекомендується використовувати унікальні назви для глобальних функцій (з префіксом)

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

- [Що таке віджет](/uk/channels/explanation/what-is-widget.md)
- [JavaScript API для керування віджетом](/uk/channels/explanation/widget-javascript-api.md)
- [Налаштування віджету в Налаштування](/uk/channels/how-to/configure-widget-settings.md)
- [Керування віджетом з сайту](/uk/channels/how-to/manage-widget-from-site.md)