How to make a fullscreen button on click?

[Primatus]

Hi everyone!

I’m trying to create a fullscreen button in WeWeb — so that when the user clicks it, the entire website goes fullscreen (like F11 or browser fullscreen mode).

[Agustin_Carozo]

Hi Leo, welcome to the community

I asked the AI to create a button to make my app go full screen and it created it really fast.

it ended up creating 2 workflows, one global and one app workflow.
In those workflows it created some custom JS where it applied a bunch of changes to the DOM and browser.

In short, is best to ask the AI to create this functionality for you.

Let me know how it goes.

[Broberto]

Hi, if you don’t want to waste time with the AI and have full control over it, you can simply use these few lines of code. This workflow can then be invoked from wherever in your app and it not only makes the element go fullscreen, but also toggles the fullscreen of when the browser already is in fullscreen mode.

const _document = wwLib.getFrontDocument();
const fsElement = _document.getElementById('fsElement');

if (!fsElement) return;

if (!document.fullscreenElement) {
    fsElement.requestFullscreen();
} else {
    document.exitFullscreen?.();
}

Make sure to assign this specific ID to the element, and also make sure it’s not a section, but any other element, e.g. a Flexbox / Div in my case.

Source: Fullscreen API - Web APIs | MDN