> ## Documentation Index
> Fetch the complete documentation index at: https://docs.daily.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Iframe UI events

> Events for Daily Prebuilt UI state changes — fullscreen, picture-in-picture, sidebar, and more.

These events are specific to calls using [Daily Prebuilt](/docs/prebuilt) (iframe mode). They fire when the UI state changes — entering fullscreen, toggling picture-in-picture, switching sidebar panels, and so on.

***

## fullscreen

<Badge color="green">{"✓"} Prebuilt</Badge> <Badge color="red">{"✗"} Custom</Badge>

Fires when the call iframe enters browser fullscreen mode — typically when a user clicks the fullscreen button or when [`requestFullscreen()`](/reference/daily-js/instance-methods/request-fullscreen) is called.

```json theme={null}
// Example event object
{
  "action": "fullscreen",
  "callClientId": "17225364729060.9442072768918943"
}
```

***

## exited-fullscreen

<Badge color="green">{"✓"} Prebuilt</Badge> <Badge color="red">{"✗"} Custom</Badge>

Fires when the call iframe exits fullscreen mode.

```json theme={null}
// Example event object
{
  "action": "exited-fullscreen",
  "callClientId": "17225364729060.9442072768918943"
}
```

***

## active-speaker-mode-change

<Badge color="green">{"✓"} Prebuilt</Badge> <Badge color="red">{"✗"} Custom</Badge>

Fires when Active Speaker mode is toggled — either via the built-in UI or programmatically via [`setActiveSpeakerMode()`](/reference/daily-js/instance-methods/set-active-speaker-mode).

<Note>
  Active Speaker mode is a Daily Prebuilt concept. If you've built your own custom UI, this event will not fire and `setActiveSpeakerMode()` will have no effect.
</Note>

<ResponseField name="action" type="string">
  Always `"active-speaker-mode-change"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="enabled" type="boolean">
  `true` if Active Speaker mode was turned on, `false` if turned off.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "active-speaker-mode-change",
  "enabled": true,
  "callClientId": "17225364729060.9442072768918943"
}
```

***

## show-local-video-changed

<Badge color="green">{"✓"} Prebuilt</Badge> <Badge color="red">{"✗"} Custom</Badge>

Fires when the local participant's self-view is shown or hidden — either by user interaction or when [`setShowLocalVideo()`](/reference/daily-js/instance-methods/set-show-local-video) is called.

<ResponseField name="action" type="string">
  Always `"show-local-video-changed"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="show" type="boolean">
  `true` if the local video is now visible, `false` if hidden.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "show-local-video-changed",
  "show": true,
  "callClientId": "17225364729060.9442072768918943"
}
```

***

## pip-started

<Badge color="green">{"✓"} Prebuilt</Badge> <Badge color="red">{"✗"} Custom</Badge>

Fires when picture-in-picture mode starts — either from the built-in PiP button or when the browser's PiP API is activated.

```json theme={null}
// Example event object
{
  "action": "pip-started",
  "callClientId": "17225364729060.9442072768918943"
}
```

***

## pip-stopped

<Badge color="green">{"✓"} Prebuilt</Badge> <Badge color="red">{"✗"} Custom</Badge>

Fires when picture-in-picture mode stops — when the user exits PiP via the button, closes the PiP window using browser controls, or the browser deactivates PiP.

```json theme={null}
// Example event object
{
  "action": "pip-stopped",
  "callClientId": "17225364729060.9442072768918943"
}
```

***

## sidebar-view-changed

<Badge color="green">{"✓"} Prebuilt</Badge> <Badge color="red">{"✗"} Custom</Badge>

Fires when the sidebar panel changes — either via user interaction or when [`setSidebarView()`](/reference/daily-js/instance-methods/set-sidebar-view) is called.

<ResponseField name="action" type="string">
  Always `"sidebar-view-changed"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="view" type="SidebarView">
  The currently active sidebar panel. Built-in values are `'people'`, `'chat'`, `'network'`, and `'breakout'`. Custom panel names are also possible. `null` means the sidebar is closed.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "sidebar-view-changed",
  "view": "people",
  "callClientId": "17225364729060.9442072768918943"
}
```

***

## custom-button-click

<Badge color="green">{"✓"} Prebuilt</Badge> <Badge color="red">{"✗"} Custom</Badge>

Fires when a local participant clicks a custom tray button. See [`customTrayButtons`](/reference/daily-js/types/daily-call-options#param-custom-tray-buttons) and [`updateCustomTrayButtons()`](/reference/daily-js/instance-methods/update-custom-tray-buttons) for how to add custom buttons to the tray.

<ResponseField name="action" type="string">
  Always `"custom-button-click"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="button_id" type="string">
  The ID of the button that was clicked, as defined in `customTrayButtons`.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "custom-button-click",
  "button_id": "myCustomButton",
  "callClientId": "17225364729060.9442072768918943"
}
```

```javascript theme={null}
call.on('custom-button-click', ({ button_id }) => {
  if (button_id === 'raise-hand') {
    toggleHandRaise();
  }
});
```

***

## lang-updated

<Badge color="green">{"✓"} Prebuilt</Badge> <Badge color="green">{"✓"} Custom</Badge>

Fires after [`setDailyLang()`](/reference/daily-js/instance-methods/set-daily-lang) is called. `lang` is the language currently in effect; `langSetting` is the value that was explicitly set. For example, calling `setDailyLang('user')` defers to the browser's language preference — `langSetting` will be `'user'` and `lang` will be the resolved language like `'en'`.

In custom call object mode, this event fires but has no automatic visual effect — use the payload to update your own UI if needed.

<ResponseField name="action" type="string">
  Always `"lang-updated"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="lang" type="DailyLanguage">
  The language currently in effect (e.g. `'en'`, `'fr'`).
</ResponseField>

<ResponseField name="langSetting" type="DailyLanguageSetting">
  The value explicitly set via `setDailyLang()` — may be a language code or `'user'` to follow the browser setting.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "lang-updated",
  "callClientId": "17225364729060.9442072768918943",
  "lang": "en",
  "langSetting": "user"
}
```

***

## theme-updated

<Badge color="green">{"✓"} Prebuilt</Badge> <Badge color="red">{"✗"} Custom</Badge>

Fires when the Prebuilt theme changes via [`setTheme()`](/reference/daily-js/instance-methods/set-theme).

<ResponseField name="action" type="string">
  Always `"theme-updated"`.
</ResponseField>

<ResponseField name="callClientId" type="string">
  The ID of the call client instance that emitted this event.
</ResponseField>

<ResponseField name="theme" type="DailyThemeConfig">
  The full current theme configuration, including the `colors` object.
</ResponseField>

```json theme={null}
// Example event object
{
  "action": "theme-updated",
  "callClientId": "17225364729060.9442072768918943",
  "theme": {
    "colors": {
      "accent": "#F3B3A6",
      "background": "#D7FBFE",
      "backgroundAccent": "#9CF6FC",
      "border": "#797BA9",
      "mainAreaBg": "#B7CE63",
      "mainAreaBgAccent": "#8FB339"
    }
  }
}
```

***

## See also

<CardGroup>
  <Card title="Methods" icon="code" iconType="solid">
    * [requestFullscreen()](/reference/daily-js/instance-methods/request-fullscreen)
    * [exitFullscreen()](/reference/daily-js/instance-methods/exit-fullscreen)
    * [setActiveSpeakerMode()](/reference/daily-js/instance-methods/set-active-speaker-mode)
    * [setSidebarView()](/reference/daily-js/instance-methods/set-sidebar-view)
    * [setShowLocalVideo()](/reference/daily-js/instance-methods/set-show-local-video)
    * [setTheme()](/reference/daily-js/instance-methods/set-theme)
    * [setDailyLang()](/reference/daily-js/instance-methods/set-daily-lang)
    * [updateCustomTrayButtons()](/reference/daily-js/instance-methods/update-custom-tray-buttons)
  </Card>

  <Card title="Guides" icon="book-open" iconType="solid">
    * [Events](/docs/daily-js/concepts/events)
    * [Daily Prebuilt overview](/docs/prebuilt)
    * [Customizing Daily Prebuilt](/docs/prebuilt/customizing-daily-prebuilt)
  </Card>
</CardGroup>