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

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

Проблема з SPA

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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
          }
        });
      }
    }
  }
}

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

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

// Для 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