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:

!

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 the Spawning Tool Build Advisor.

• 

  "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:

Feature	transparent	non-transparent	native
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.