> ## Documentation Index
> Fetch the complete documentation index at: https://developer.watson-orchestrate.ibm.com/llms.txt
> Use this file to discover all available pages before exploring further.

# view:change

Triggered after the view state changes. This event enables post-change logic such as analytics, UI updates, or side effects.

## Event properties

<ParamField path="type" type="string" required>
  Always `'view:change'`.
</ParamField>

<ParamField path="reason" type="string" required>
  The reason for the view change.
</ParamField>

<ParamField path="oldViewState" type="object" required>
  The previous view state.
</ParamField>

<ParamField path="oldViewState.launcher" type="boolean">
  Whether the launcher was visible.
</ParamField>

<ParamField path="oldViewState.mainWindow" type="boolean">
  Whether the main window was visible.
</ParamField>

<ParamField path="newViewState" type="object" required>
  The new view state.
</ParamField>

<ParamField path="newViewState.launcher" type="boolean">
  Whether the launcher is now visible.
</ParamField>

<ParamField path="newViewState.mainWindow" type="boolean">
  Whether the main window is now visible.
</ParamField>

## Example

```javascript theme={null}
instance.on('view:change', (event, instance) => {
    console.log('View changed:', {
        reason: event.reason,
        from: event.oldViewState,
        to: event.newViewState
    });
    
    // Remove transition CSS class
    document.body.classList.remove('chat-view-changing');
    
    // Track analytics
    if (event.newViewState.mainWindow && !event.oldViewState.mainWindow) {
        analytics.track('chat_opened', { reason: event.reason });
    }
    
    // Adjust page layout
    if (event.newViewState.mainWindow) {
        adjustPageLayout('chat-open');
    } else {
        adjustPageLayout('chat-closed');
    }
});
```

<Card title="Do you need practical examples?" icon="text-align-start" href="https://www.ibm.com/docs/SSAVQO/deploy/web_chat_agent/tutorials/tutorials_lp.html" arrow="true" cta="Learn with walk-throughs" horizontal>
  Learn how to apply the features available for embedded chat into your implementation with guidance and examples.
</Card>