Additional Interface Actions

Overview

This section allows you to enable additional control elements in the header of your chat interface. You can choose between two available actions:

• Exit – Closes the chat.
• Fullscreen – Expands the chat to fullscreen and allows exiting fullscreen mode.

Once enabled, these controls appear as icons in the chat header and trigger postMessage events to communicate with the parent window (where the chat is embedded via iframe).

How to Enable

1. Go to Admin panel → Settings → Chat customization → The interface elements.
2. Toggle Enable additional actions in the interface.
3. Choose one of the available options:
   1. Exit
   2. Fullscreen

Only one action can be enabled at a time.

Option 1: Exit Button

Function
Adds a button that closes the chat when clicked.

Behavior
When the user clicks the Exit button, the chat sends the following postMessage event to the parent window:

{type: 'watchersWindowClose'}

Example Listener in Parent Window

window.addEventListener("message", (event) => {
  if (event.data?.type === "watchersWindowClose") {
    console.log("Chat closed by user");
    // Hide the iframe or trigger any other closing behavior
  }
});

Option 2: Fullscreen Button

Function
Adds a button that toggles fullscreen mode for the chat iframe.

Behavior
When the button is clicked, the chat iframe sends a postMessage with the following payload:

{
	type: 'fullscreen',
	body: {
		action: 'collapse'/'expand'
	}
}

This message notifies the parent application to handle toggling fullscreen mode (e.g., expanding the iframe to fill the screen).

**Example Listener in Parent Window **

window.addEventListener("message", (event) => {
  if (event.data?.type === "fullscreen") {
    console.log("Toggle fullscreen triggered");
    // Your logic for fullscreen / exit fullscreen
  }
});

Notes

• Only one action can be active at a time: either Exit or Fullscreen.
• These controls are useful for integration with parent interfaces.
• Make sure your parent window handles 'postMessage' events securely and validates the origin of the message.