How to Work with Widget on SPA Applications

Single Page Applications (SPA) don't reload the page when routes change. For correct widget operation on SPA, you need to use special reinitialization methods and visibility control.

SPA Problem

On regular websites, when the page reloads, the widget reinitializes. On SPA, the page doesn't reload, so the widget requires special handling when routes change.

Use kw_event('kwreinitwidget', {...}) to reinitialize the widget when the route changes:

Creating New Chat

// Create new chat when navigating to a new page
router.onRouteChange(function(newRoute) {
  kw_event('kwreinitwidget', { user_id: null });
});

Changing User

// Change user
kw_event('kwreinitwidget', { user_id: 123456789 });

Updating Parameters

// Update parameters when page changes
router.onRouteChange(function(newRoute) {
  kw_event('kwreinitwidget', {
    params_from_site: {
      page_url: window.location.href,
      page_type: newRoute.type
    }
  });
});

Changing Title

// Change title when page changes
router.onRouteChange(function(newRoute) {
  kw_event('kwreinitwidget', {
    title: 'New Title',
    subtitle: 'New Subtitle'
  });
});

Managing Launcher Visibility

On SPA, you may need to hide/show the launcher depending on the page:

Hide Launcher

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

Show Launcher

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

Usage Example:

// Hide launcher on login page
if (window.location.pathname === '/login') {
  kw_event('kwvisiblelauncher', { visible: false });
} else {
  kw_event('kwvisiblelauncher', { visible: true });
}

React Router Integration Example

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

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

  useEffect(() => {
    // Reinitialize widget when route changes
    if (window.kw_event) {
      window.kw_event('kwreinitwidget', {
        params_from_site: {
          page_url: window.location.href,
          page_path: location.pathname
        }
      });
    }
  }, [location]);

  return (
    // Your component
  );
}

Vue Router Integration Example

export default {
  watch: {
    '$route'(to, from) {
      // Reinitialize widget when route changes
      if (window.kw_event) {
        window.kw_event('kwreinitwidget', {
          params_from_site: {
            page_url: window.location.href,
            page_path: to.path
          }
        });
      }
    }
  }
}

Router Event Handling

Configure route change handling for automatic reinitialization:

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

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

Important Notes

When user_id: null, the cookie_chat_id cookie is deleted to create a new chat
Socket.IO closes through socketClose before reinitialization
Launcher automatically becomes visible after reinitialization
Parameters update through setParamsFromSite() if params_from_site is passed