# How to Manage Widget from Website

ConnectiveOne widget provides a JavaScript API for programmatic control of widget behavior from your website. This allows opening/closing chat, changing title, passing events to the scenario, and integrating the widget with your website.

---

## Opening and Closing Chat

### Open Chat

```javascript
kw_event('openchat', 1);
```

### Close Chat

```javascript
kw_event('openchat', 0);
```

**Usage Example:**

```javascript
// Open chat on button click
document.getElementById('open-chat-btn').addEventListener('click', function() {
  kw_event('openchat', 1);
});

// Close chat on button click
document.getElementById('close-chat-btn').addEventListener('click', function() {
  kw_event('openchat', 0);
});
```

---

## Changing Title and Subtitle

Update chat title and subtitle:

```javascript
kw_event('command', {
  title: "New Title",
  subtitle: "New Subtitle"
});
```

**Usage Example:**

```javascript
// Change title when navigating to another page
if (window.location.pathname === '/products') {
  kw_event('command', {
    title: "Product Questions",
    subtitle: "Our consultants will help"
  });
}
```

---

## Navigate to Scenario Entry Point

Call a specific alias in the scenario:

```javascript
kw_event('emitevent', {
  event: 'alias',
  alias: 'test-alias'
});
```

**Usage Example:**

```javascript
// Navigate to product scenario on click
document.getElementById('product-inquiry-btn').addEventListener('click', function() {
  kw_event('emitevent', {
    event: 'alias',
    alias: 'product-inquiry'
  });
  kw_event('openchat', 1); // Open chat
});
```

---

## Saving Chat State

Save chat state in localStorage for restoration after reload:

```javascript
kw_event('widgetstatus', 1);
```

After execution, the following is saved in `localStorage`:
- `isChatOpen` — widget state (collapsed/expanded)
- `connectState` — operator connection state

**Restore State:**

```javascript
// Check saved state
const savedStatus = localStorage.getItem('kw_widget_status');
if (savedStatus) {
  const status = JSON.parse(savedStatus);
  if (status.isChatOpen) {
    kw_event('openchat', 1);
  }
}
```

---

## Listening to Widget Events

You can listen to widget events for integration with your website:

```javascript
// Chat opened
document.addEventListener("widgetChatOpened", function(event) {
  console.log('Chat opened', event);
  // Your handling code
  // For example, tracking in Google Analytics
  if (window.gtag) {
    window.gtag('event', 'widget_chat_opened');
  }
});

// Chat closed
document.addEventListener("widgetChatClosed", function(event) {
  console.log('Chat closed', event);
  // Your handling code
});
```

---

## Combining Actions

You can combine different actions for complex scenarios:

```javascript
// Open chat, change title, and navigate to alias
function openProductChat(productId) {
  kw_event('kwsetparamsfromsite', {
    params_from_site: {
      product_id: productId,
      action: 'product_inquiry'
    }
  });
  kw_event('command', {
    title: "Product Question",
    subtitle: "Our consultant will help"
  });
  kw_event('emitevent', {
    event: 'alias',
    alias: 'product-inquiry'
  });
  kw_event('openchat', 1);
}

// Usage
document.getElementById('product-btn').addEventListener('click', function() {
  openProductChat('12345');
});
```

---

## Limitations

- Widget must be initialized before calling `kw_event`
- Some actions may not work if the widget is not loaded
- It's recommended to check for the `kw_event` function before calling

---

## Related Articles

- [Widget JavaScript API](/en/channels/explanation/widget-javascript-api.md)
- [Work with SPA applications](/en/channels/how-to/work-with-widget-spa.md)
- [Pass parameters from website to scenario](/en/channels/how-to/pass-parameters-from-widget.md)
- [Data exchange with widget](/en/integrations/explanation/what-are-integrations.md#widget-data-exchange)