# 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.

---

## Widget Reinitialization

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

### Creating New Chat

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

### Changing User

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

### Updating Parameters

```javascript
// 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

```javascript
// 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

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

### Show Launcher

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

**Usage Example:**

```javascript
// 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

```javascript
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

```javascript
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:

```javascript
// 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

---

## Related Articles

- [Widget JavaScript API](/en/channels/explanation/widget-javascript-api.md)
- [Manage widget from website](/en/channels/how-to/manage-widget-from-site.md)
- [Pass parameters from website to scenario](/en/channels/how-to/pass-parameters-from-widget.md)
- [Connect widget to website](/en/channels/how-to/setup-widget-on-website.md)