Skip to main content

Windows Types

Behavior is different depending on window type, and we're going to go over two main types of Overwolf app windows: Transparent vs. Non-Transparent Windows.

Non-Transparent Window

A non-Transparent Window is the standard Overwolf window. A window with borders, control buttons and opacity slider.

  • Any part of your window that has a transparent background ("background: transparent;") will become white.

Example from the manifest.json:

  • In order to create this window you should set the transparent property in your manifest.json to 'false'.
  • In order to enable a maximize / minimize buttons, you should set the right flags in the manifest to "true".
"windows": {
"windowName": {
"file": "name.html",
"transparent": false,
"show_maximize": true, //only relevant for non-transparent windows
"show_minimize": true //only relevant for non-transparent windows
}
}

Example for a standard, non-transparent window:

!standard window

Transparent window

info

The term transparent might be a bit misleading. This window has no borders, window control buttons or default background – create those elements by yourself in your HTML/CSS.

A Transparent Window is a window without borders, control buttons and opacity slider.

  • Any part of your window that has a transparent background ("background: transparent;") will become a see-through area that blends with the game or desktop behind it.
  • You should implement the window header with the control elements (like maximize, minimize) independently, by yourself in the HTML/CSS. (you can use our UI components samples)
  • You should implement dragging behavior independently, by yourself. (you can use our sample app that already implemented this feature)
  • Avoid full-screen transparent windows. More info here.

Example from the manifest.json:

  • In order to create this window you should set the transparent property in your manifest.json to 'true'.
"windows": {
"windowName": {
"file": "name.html",
"transparent": true
}
}

Here you can see some examples for transparent windows:

  • "transparent" window that is being used in our sample app.

    "transparent" window that is being used in our sample app.

  • "transparent" window that is being used in the Spawning Tool Build Advisor.

    "transparent" window that is being used in the Spawning Tool Build Advisor.

  • "transparent" window being used in the Legendary Builds app.

    "transparent" window being used in the Legendary Builds app.

Native window

If your app includes a window that will only be visible on desktop, either before, after or on a 2nd screen during game (desktop_only:true), you should define this window as a "native".

It will dramatically improve your app performance and help design an efficient, elegant product.

  • A native window is always a non-transparent window.
  • Any part of your window that has a transparent background ("background: transparent;") will become black.
  • You should implement the window header with the control elements (like maximize, minimize) independently, by yourself in the HTML/CSS. (you can use our UI components samples)
  • Native windows change their size according to the users' DPI automagically. (to disable that use the disable_auto_dpi_sizing flag)
  • On native window, window.screen returns the dimensions of the desktop with calculating DPI. (on non-native window, it returns without calculating DPI)

Example from the manifest.json:

add the following flags to that window's data in the app’s manifest.json file:

"desktop_only": true,
"native_window":true,

Comparison table

To summarize, these are the main differences between the transparent, non-transparent, and native windows:

Featuretransparentnon-transparentnative
desktop_only support+++
in_game_only support++-
built-in controls (maximize,minimize)-+-
built-in dragging-+-
built-in resizing+++
See-through background+- (white bg)- (black bg)
DPI-Aware mechanic--+

Sample app

You should download our sample app, it covers transparent/non-transparent window creation and much more.