fullscreen:set embed event

Use this event to programmatically control the fullscreen state of your embedded Omni session and build custom fullscreen controls in the parent application. This event is useful when:

You want to build your own fullscreen button in the parent application
You need to keep Omni’s presentation state in sync with native browser fullscreen
You want to provide a consistent fullscreen experience across your application

The postMessage protocol does not carry user activation, so sending this event alone only applies Omni’s CSS overlay presentation. To enable true browser fullscreen, call iframeElement.requestFullscreen() in your own click handler first, then post fullscreen:set to sync Omni’s presentation styling.

{
  "name": "fullscreen:set",
  "payload": {
    "isFullScreen": true
  }
}

Properties

boolean

required

The fullscreen presentation state to apply. Accepts one of:

true - Activates fullscreen presentation mode
false - Deactivates fullscreen presentation mode

Example

This example demonstrates a parent-controlled fullscreen implementation that coordinates native browser fullscreen with Omni’s presentation state:

<iframe id="omni" src="https://embed.example.omni.co/dashboards/abc123" allow="fullscreen" allowfullscreen></iframe>
<button id="fullscreen-btn">Full screen</button>

<script>
  const iframe = document.getElementById('omni')

  document.getElementById('fullscreen-btn').addEventListener('click', () => {
    // Native fullscreen needs the click's user activation, so the parent
    // requests it on the iframe element itself...
    iframe.requestFullscreen()
    // ...and tells Omni to apply its presentation styling.
    iframe.contentWindow.postMessage(
      { name: 'fullscreen:set', payload: { isFullScreen: true } },
      'https://embed.example.omni.co'
    )
  })

  // Keep the parent in sync however fullscreen was entered or exited
  // (Omni's own button, keyboard shortcut, Esc).
  window.addEventListener('message', ({ data }) => {
    if (data?.source === 'omni' && data.name === 'fullscreen:changed') {
      console.log('fullscreen:', data.payload.isFullScreen)
      if (!data.payload.isFullScreen && document.fullscreenElement) {
        document.exitFullscreen()
      }
    }
  })
</script>

Getting started

Setup

App customization

Events & interactivity

Admin

fullscreen:set embed event

Properties

Example

​Properties

​Example

Properties

Example