One challenge when building an Electron Tray app is window positioning – assuming you want the app to act as a tooltip (eg: Google Drive app).

If you’re here just for the resulting code, scroll down and grab it, otherwise I highly recommend using a pen and paper to draw the screen, taskbar and tray position – as it makes it easier to figure how everything comes together.
Electron tray app windows taskbar

We’re interested in the workspace (gray area), whole screen (blue area), and the two dots: top (workspace X&Y coordinates) and the bottom are the X&Y of the tray icon.

Our goal is to figure out the coordinates where the app top-left corner should be. On macOS you can position your tray app by following these steps :

  1. Get your app and tray bounds – this will give you their X & Y points as well as their width and height.
  2. You can determine the coordinates by using the following method:
x = trayX - (trayWidth / 2) - (appWidth / 2);
y = trayY + trayHeight;

Your final code might look something like this:

// Get app window and tray bounds
let winBounds = win.getBounds();
let trayBounds = tray.getBounds();

// Calculate new app window coordinates
let x = Math.round(trayBounds.x + (trayBounds.width / 2) - (winBounds.width / 2));
let y = trayBounds.y + trayBounds.height;

// Set new position
win.setPosition(x, y);

Electron Tray app positioning on Windows taskbar:

Here is where things get a bit more complicated because as you may know, Windows OS allows their users to switch their taskbar position – so the above formula won’t work when the taskbar is positioned on the left, right, or bottom part of the screen.

Here’s what we’ll need to pull this off:

  • As before, the app and tray bounds
  • Workspace and Display bounds

We need the workspace and display bounds for two reasons:

  1. figure out the taskbar position so we can pick the correct formula
  2. when the taskbar is on either right or left, we can no longer trust the tray bounds as the icons might be positioned on two columns, making our app floating over the taskbar

Electron window tray taskbar positioning
Here’s what I was able to come off with:


function getAppWindowCoordinates() {
    let winBounds = win.getBounds();

    // There may be more than one screen, so we need to figure out on which screen our tray icon lives.
    let trayScreen = screen.getDisplayNearestPoint({
        x: trayBounds.x,
        y: trayBounds.y
    });

    // Now that we know the display, we can grab its bounds and its workspace area.
    let workArea = trayScreen.workArea;
    let screenBounds = trayScreen.bounds

    // TASKBAR LEFT
    if (workArea.x > 0) { // The workspace starts more on the right
        return {
            x: workArea.x,
            y: workArea.height - winBounds.height
        };
    }

    // TASKBAR TOP
    if (workArea.y > 0) {
        return {
            x: Math.round(trayBounds.x + (trayBounds.width / 2) - (appBounds.width / 2)),
            y: y
        };
    }

    // TASKBAR RIGHT
    // Here both workArea.y and workArea.x are 0 so we can no longer leverage them. We can use the workarea and display width though.
    if (workArea.width < screenBounds.width) { // The taskbar is either on the left or right, but since the LEFT case was handled above, we can be sure we're dealing with a right taskbar
        return {
            x: workArea.width - appBounds.width,
            y: screenBounds.height - appBounds.height
        };
    }

    // TASKBAR BOTTOM
    // Since all the other cases were handled, we can be sure we're dealing with a bottom taskbar
    return {
        x: Math.round(trayBounds.x + (trayBounds.width / 2) - (appBounds.width / 2)),
        y: workArea.height - appBounds.height
    };
}

Caution: when the taskbar is on top or bottom, the app window is positioned in the middle of the tray icon, but when the taskbar is on the sides, I chosed to make the window go to the bottom of the screen rather than positioning it in the middle.

I know it’s a bit cumbersome to follow these kinds of articles, but I hope it was just good enough to help you figure things out.