Skip to main content
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

​
type
string
required
Always 'view:pre:change'.
​
reason
string
required
The reason for the view change, for example, 'launcherClicked', 'chatLoaded', 'calledChangeView', 'mainWindowMinimized'.
​
oldViewState
object
required
The previous view state.
​
oldViewState.launcher
boolean
Whether the launcher was visible.
​
oldViewState.mainWindow
boolean
Whether the main window was visible.
​
newViewState
object
required
The new view state to apply. It can be modified by the handler.
​
newViewState.launcher
boolean
Whether the launcher will be visible.
​
newViewState.mainWindow
boolean
Whether the main window will be visible.

​
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

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

Do you need practical examples?

Learn how to apply the features available for embedded chat into your implementation with guidance and examples.