# Як працювати з віджетом на SPA додатках

Single Page Applications (SPA) не перезавантажують сторінку при зміні роутів. Для коректної роботи віджету на SPA потрібно використовувати спеціальні методи переініціалізації та керування видимістю.

## Проблема з SPA

На звичайних сайтах при перезавантаженні сторінки віджет ініціалізується заново. На SPA сторінка не перезавантажується, тому віджет потребує спеціальної обробки при зміні роутів.

## Переініціалізація віджету

Використовуйте `kw_event('kwreinitwidget', {...})` для переініціалізації віджету при зміні роуту:

### Створення нового чату

```javascript
// При переході на нову сторінку створити новий чат
router.onRouteChange(function(newRoute) {
  kw_event('kwreinitwidget', { user_id: null });
});
```

### Зміна користувача

```javascript
// Змінити користувача
kw_event('kwreinitwidget', { user_id: 123456789 });
```

### Оновлення параметрів

```javascript
// Оновити параметри при зміні сторінки
router.onRouteChange(function(newRoute) {
  kw_event('kwreinitwidget', {
    params_from_site: {
      page_url: window.location.href,
      page_type: newRoute.type
    }
  });
});
```

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

```javascript
// Змінити заголовок при зміні сторінки
router.onRouteChange(function(newRoute) {
  kw_event('kwreinitwidget', {
    title: 'Новий заголовок',
    subtitle: 'Новий підзаголовок'
  });
});
```

## Керування видимістю лаунчера

На SPA може знадобитися сховати/показати лаунчер залежно від сторінки:

### Сховати лаунчер

```javascript
kw_event('kwvisiblelauncher', { visible: false });
```

### Показати лаунчер

```javascript
kw_event('kwvisiblelauncher', { visible: true });
```

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

```javascript
// Сховати лаунчер на сторінці входу
if (window.location.pathname === '/login') {
  kw_event('kwvisiblelauncher', { visible: false });
} else {
  kw_event('kwvisiblelauncher', { visible: true });
}
```

## Приклад інтеграції з React Router

```javascript
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function App() {
  const location = useLocation();

  useEffect(() => {
    // Переініціалізація віджету при зміні роуту
    if (window.kw_event) {
      window.kw_event('kwreinitwidget', {
        params_from_site: {
          page_url: window.location.href,
          page_path: location.pathname
        }
      });
    }
  }, [location]);

  return (
    // Ваш компонент
  );
}
```

## Приклад інтеграції з Vue Router

```javascript
export default {
  watch: {
    '$route'(to, from) {
      // Переініціалізація віджету при зміні роуту
      if (window.kw_event) {
        window.kw_event('kwreinitwidget', {
          params_from_site: {
            page_url: window.location.href,
            page_path: to.path
          }
        });
      }
    }
  }
}
```

## Обробка подій роутера

Налаштуйте обробку зміни роутів для автоматичної переініціалізації:

```javascript
// Для React Router
history.listen((location) => {
  if (window.kw_event) {
    window.kw_event('kwreinitwidget', {
      params_from_site: {
        page_url: window.location.href,
        page_path: location.pathname
      }
    });
  }
});

// Для Vue Router
router.afterEach((to, from) => {
  if (window.kw_event) {
    window.kw_event('kwreinitwidget', {
      params_from_site: {
        page_url: window.location.href,
        page_path: to.path
      }
    });
  }
});
```

## Важливі примітки

- При `user_id: null` cookie `cookie_chat_id` видаляється для створення нового чату
- Socket.IO закривається через `socketClose` перед переініціалізацією
- Лаунчер автоматично стає видимим після переініціалізації
- Параметри оновлюються через `setParamsFromSite()` якщо передано `params_from_site`

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

- [JavaScript API для керування віджетом](/uk/channels/explanation/widget-javascript-api.md)
- [Керування віджетом з сайту](/uk/channels/how-to/manage-widget-from-site.md)
- [Передача параметрів з сайту до сценарію](/uk/channels/how-to/pass-parameters-from-widget.md)
- [Підключення віджету на сайт](/uk/channels/how-to/setup-widget-on-website.md)