Skip to main content
The Nmbr Component renders inside a container element you control, and its iframe sizes itself to 100% of that container. Fullscreen is therefore handled on your side: expand the container and the component grows to match. No additional configuration is required from Nmbr.

​
Using a CSS overlay

The simplest approach is a fixed-position overlay. Add a class that pins the container to every edge of the viewport, then toggle it on demand. 
#nmbr-container.fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

const container = document.querySelector('#nmbr-container');
const fullscreenButton = document.querySelector('#fullscreen-button');

fullscreenButton.addEventListener('click', () => {
  container.classList.toggle('fullscreen');
});
Because the overlay covers your own application chrome (including the button that toggled it), render an exit control that stays visible in fullscreen. Position it above the overlay, and toggle its visibility together with the overlay: 
#exit-fullscreen {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 10000;
}

const container = document.querySelector('#nmbr-container');
const fullscreenButton = document.querySelector('#fullscreen-button');
const exitButton = document.querySelector('#exit-fullscreen');

function setFullscreen(on) {
  container.classList.toggle('fullscreen', on);
  exitButton.hidden = !on;
}

fullscreenButton.addEventListener('click', () => {
  setFullscreen(!container.classList.contains('fullscreen'));
});

exitButton.addEventListener('click', () => setFullscreen(false));
Don’t rely on the Escape key as the only way out. Once the user interacts with the component, keyboard focus moves into its iframe and key events no longer reach your page, so an Escape listener on the host document stops firing. A visible exit control always works because it lives in your page, above the overlay. You can still add Escape as a convenience:
document.addEventListener('keydown', (event) => {
  if (event.key === 'Escape') {
    setFullscreen(false);
  }
});
The component renders its modals and notifications at a very high stacking order, so keep your overlay and its exit control below them. The values shown above are safe; a much larger z-index can cause the component’s own dialogs to appear behind your overlay.

​
Native Fullscreen API

For true, OS-level fullscreen that also hides the browser’s own chrome, call the Fullscreen API on the container instead: 
const container = document.querySelector('#nmbr-container');

// Must be triggered by a user gesture, such as a click
container.requestFullscreen();

// Exit fullscreen
document.exitFullscreen();
The CSS overlay is recommended for most integrations: it keeps the browser chrome visible, does not require a user gesture, and gives you full control over the transition.