Skip to main content

General tips for using windows

This article outlines some best practices and tips for using Overwolf windows.

Call getCurrentWindow() once​

A window should call overwolf.windows.getCurrentWindow() once during startup and store the results in a variable.

For example:

overwolf.windows.getCurrentWindow(function(result) {
    if(result.status === "success") {
        overwolf.windows.dragMove(result.window.id);
    }
});

Avoid full-screen transparent windows​

Overwolf apps are supposed to act like native desktop applications and not as websites. Don’t create full-screen transparent windows with draggable HTML elements (e.g. <div>). This may result in:

  • Creating low-performance or slow experiences.
  • Using more CPU than required for your features.
  • Lack of support for dual screens or companion laptop screens, including dragging an element to the second screen.
  • The risk of a broken HTML page covering the entire game screen.
  • The risk of grabbing focus without the gamer wanting it, or understanding why.

Your app is not a website​

Overwolf apps function as desktop applications and should prioritize clear and useful information within a compact layout that isn’t always full-screen. Moreover, app developers should consider ad integration as part of the app's layout. Unlike a browser experience where the grid remains flexible, ads naturally impact the app’s structure and should be accounted for in the design from the start.

Keep your windows small​

Avoid using large windows and try to get your app's design to be focused, to the point, and as small as you can effectively make it. Large windows have performance costs, so it's important to make sure that you render your windows effectively and efficiently.

Use block_top_window_navigation​

Is is recommended to always set the block_top_window_navigation flag to true in your manifest.json file. This will ensure that no bugs or accidental calls like window.top.href take control of your entire app.

The reason this is to false by default is to ensure backward compatibility for apps that are hosted on remote servers.

Use a background controller​

Consider using your main window as a hidden controller window that the user doesn’t see – it can act as a service that runs in the background and communicates with other visible windows of the app. For apps that auto-launch when the game starts or wish to implement pop-up notifications, this is a must-have.

This hidden window should have the is_background_page flag set to true in the app’s manifest.json file.

For example:

"index" : {
  ...
  "is_background_page": true,
  ...
}

Use native desktop windows​

Set your window as native if your app includes a window that will only be visible on desktop but not while playing. This improves your app's performance and helps design an efficient app.

For more information, see Native window.

The webkit app region drag property​

It is possible to add the -webkit-app-region: drag css property to elements making them drag the entire window with them.

note

This behavior takes priority over button presses. To have working buttons inside an area with this property, you must manually exclude them from it in the css.