> ## 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:pre:change

Triggered before the view state changes, for example, showing or hiding the launcher, or main window. Use this event to react to or preprocess the upcoming view transition.

## Event properties

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

<ParamField path="reason" type="string" required>
  The reason for the view change, for example, `'launcherClicked'`, `'chatLoaded'`, `'calledChangeView'`, `'mainWindowMinimized'`.
</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 to apply. It can be modified by the handler.
</ParamField>

<ParamField path="newViewState.launcher" type="boolean">
  Whether the launcher will be visible.
</ParamField>

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

### View change reasons

* **`launcherClicked`**\
  User clicked the launcher button.

* **`chatLoaded`**\
  Chat loaded for the first time.

* **`calledChangeView`**\
  View changed programmatically through the `changeView()` method.

* **`mainWindowMinimized`**\
  User clicked the minimize button.

## Example

```javascript theme={null}
instance.on('view:pre:change', (event, instance) => {
    console.log('View about to change:', {
        reason: event.reason,
        from: event.oldViewState,
        to: event.newViewState
    });
    
    // Add CSS class during transition
    document.body.classList.add('chat-view-changing');
    
    // Modify the new view state if needed
    if (event.reason === 'launcherClicked') {
        // Ensure main window opens when launcher is clicked
        event.newViewState.mainWindow = true;
        event.newViewState.launcher = false;
    }
});
```

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