# Як налаштувати віджет в Налаштування

Віджет можна налаштувати в Налаштування ConnectiveOne. Тут ви згенеруєте код вставки, налаштуєте CORS домени, додасте Custom Code, задасте кастомну іконку для операторської панелі та налаштуєте інші параметри.

## Де знайти налаштування

**Шлях:** Налаштування → Боти → оберіть бота → Widget

## Генерація коду вставки

1. Перейдіть в **Налаштування → Боти → оберіть бота → Widget**
2. Налаштуйте вигляд віджету в конструкторі (якщо потрібно)
3. Скопіюйте згенерований HTML+JS код
4. Вставте код на ваш сайт

> 💡 **Порада:** Код генерується автоматично з урахуванням ваших налаштувань. Ви можете змінити параметри та скопіювати оновлений код.

## Налаштування CORS доменів

Для підключення віджету на сайті необхідно додати **origin** вашого сайту до списку дозволених. Система зберігає список як JSON-масив повних URL origin.

### Де налаштувати

- **Налаштування → Боти → оберіть бота → Widget** — розділ **«Список дозволених доменів для встановлення віджету»**.
- **Конструктор сценаріїв** → конфігурація каналу **Widget** у стартовому вузлі.

### Формат origin

1. Вкажіть **повний URL origin** з протоколом: `https://www.example.com` або `http://localhost:3000`.
2. **Без слеша в кінці:** не `https://www.example.com/`.
3. **Без шляху і параметрів:** не `https://www.example.com/page` і не `https://www.example.com?ref=1`.
4. **Лише `http:` або `https:`** — інші протоколи не підтримуються.

**Приклади:**
- Правильно: `https://shop.example.com`, `https://www.example.com`, `http://localhost:5173`
- Неправильно: `example.com`, `www.example.com`, `https://example.com/`, `ftp://example.com`

### Кроки в редакторі

1. Відкрийте один із розділів вище.
2. Натисніть **«Додати домен»** і введіть origin у поле (підказка: `https://www.example.com`).
3. Додайте всі потрібні origin (наприклад, `https://shop.example.com` і `https://www.shop.example.com` — це **різні** адреси).
4. Видаліть рядок іконкою видалення, якщо домен не потрібен.
5. Натисніть **«Зберегти CORS»** (або кнопку збереження каналу в налаштуваннях бота / Конструкторі сценаріїв). Кнопка недоступна, поки в списку є некоректний URL.

> ⚠️ **Важливо:** Без додавання origin віджет не підключиться до Socket.IO з вашого сайту. Якщо раніше в інстансі збережено список у старому форматі (кома-розділений текст), система може тимчасово використовувати його при читанні — перезбережіть список через редактор, щоб зафіксувати коректний формат.

## Налаштування Custom Code

Custom Code дозволяє додати кастомний JavaScript код, який виконується перед ініціалізацією віджету.

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

**Приклад Custom Code:**

```javascript
// Модифікація параметрів перед ініціалізацією
embed_state.params_from_site = {
  ...embed_state.params_from_site,
  page_url: window.location.href
};

// Інтеграція з Google Analytics
if (window.gtag) {
  window.addEventListener('widgetChatOpened', function() {
    window.gtag('event', 'widget_chat_opened');
  });
}
```

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

## Кастомна іконка віджету в операторській панелі

Ви можете задати власну іконку для каналу Widget, яка відображатиметься в Операторській панелі поруч із чатами з цього виджету. Це допомагає операторам візуально відрізняти джерела звернень (наприклад, виджет на сайті та PWA-додаток).

1. Перейдіть у **Налаштування → Налаштування бота → Hooks → Widget**
2. Знайдіть поле **widget badge_url** (URL кастомної іконки)
3. Введіть повний URL зображення (наприклад, `https://example.com/icon.png`)
4. Збережіть налаштування

**Результат:** У списку чатів операторської панелі замість стандартної іконки виджету відображатиметься ваша іконка.

> 💡 **Порада:** Якщо URL невалідний або зображення недоступне, система покаже стандартну іконку виджету.
>
> ⚠️ **Обмеження:** Одна іконка на одного бота. Якщо потрібно відрізняти кілька точок входу (наприклад, сайт і PWA), створіть окремих ботів для кожного джерела.

Налаштування також доступне в **Scenario Builder** при конфігурації каналу Widget у стартовому вузлі сценарію.

## Налаштування версії віджету

Віджет доступний у двох версіях:

- **V2** (актуальна, рекомендована) — використовується за замовчуванням
- **Legacy** (режим сумісності) — тільки для підтримки старих інтеграцій

**Де знайти:** Налаштування → Налаштування бота → Hooks → Widget → параметр `v2_mode` та `v2_value`

> 💡 **Рекомендація:** Використовуйте V2 для всіх нових інтеграцій.

## Налаштування кольорів

Кольори віджету можна налаштувати:

1. Через **Widget Demo** (`/widget/{locale}/?bot-id={bot_id}`) — візуальний конструктор
2. Через параметр `colors` при ініціалізації віджету
3. Через `kw_event('kwcolor', {...})` під час роботи

> 📖 **Детальніше:** Дивіться [Кастомізація кольорів віджету](/uk/channels/how-to/customize-widget-colors.md)

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

- [Підключення віджету на сайт](/uk/channels/how-to/setup-widget-on-website.md)
- [Кастомізація кольорів віджету](/uk/channels/how-to/customize-widget-colors.md)
- [Використання Custom Code](/uk/channels/how-to/use-widget-custom-code.md)
- [Що таке віджет](/uk/channels/explanation/what-is-widget.md)