Skip to main content

ow-electron

ow-electron is a solution built on top of electron, aimed at allowing electron apps access to Overwolf APIs.

ow-electron App Creation

The following page lists the different ow-electron features and how to enable them.
General Overwolf app creation resources and intro to Overwolf apps are available at their respective pages.

There is no problem with running both ow-electron and electron side-by-side on the same project. In order to run your app with ow-electron, you only need to add new start and build scripts in your package.json file:

start and build command variants for @overwolf/ow-electron
{
  ...
  "scripts": {
    ...
    "start:ow-electron": "ow-electron .",
    "build:ow-electron": "ow-electron-builder --publish=never"
  },
  ...
}

Unique App ID​

Unique app ids are used for ads optimizations, as well as for optional anonymous analytics reports that you may review on our developer's console.

Every Overwolf application (ow-electron or Overwolf platform), has a unique app id. This unique id is automatically generated, and is based on the app's name, and the app's author's name.

In ow-electron, these fields correspond to the following fields in the package.json file:

  • App name - The productName (defaults to name if missing) properties
  • App author - The name field under the author field.
Partial package.json with the relevant fields
{
  ...
  "name": "ow-electron-sample-app",
  ...
  "author": {
    "name": "Overwolf"
  },
  "productName": "real-ow-electron-sample-app",
  ...
  "build": {
    ...
    "productName": "unrelated-name-passed-to-builder",
    ...
  },
  ...
}

Fetching your app ID​

Once your app has loaded, you can fetch the app ID through the API as follows:

import app from 'electron';
...
app.whenReady().then(() => {
  const appID = process.env.OVERWOLF_APP_UID;
});

Note that this environment variable will only exist once the app is ready.

The owadview tag​

Ad Enablement

In order for your app to be able to display Ads, we first have to set up our backend to support your app's uid. Please contact us for further details here.
Until then, you can test how Ads would look and behave in your app, by passing in the --test-ad commandline argument.

To enable ads for users in areas with more strict data collection regulations, it is also required to fully follow our CMP Implementation Guidelines.

The <owadview/> tag, which is based on the Electron <webview/> tag, automatically hosts and manages ads in your app.

To use it, place the <owadview/> tag (no attributes required) inside a <div> tag, with the size of the standard IAB Ad unit you wish to display.

For more information about supported ad units + General Ads guidelines, visit Working with Ads.

<div style="width: 400px; height: 300px; background: transparent;">
  <owadview />
</div>
Transparent Background

We use background: transparent, in order to allow your app to show a background image as a fallback when there is no ads inventory to display.

Other things to keep in mind:

  • The <owadview/> tag starts muted by default. This can be changed.
  • The <owadview/> tag is automatically managed, so it will already handle any issues involving ad visibility or crashes.

Anonymous Analytics​

In order to generate usage reports for your ow-electron app, we collect a small number of anonymous analytics (such as when the app is launched, and when a certain app's window is shown).

You can disable these analytics with the following piece of code:

import { app } from 'electron';

app.overwolf.disableAnonymousAnalytics();

...

app.whenReady().then(...)
Disabling Analytics

App analytics are disabled on a per-session basis. If you wish to completely disable them, you must do so before every app start, when initailizing your app.

A CMP makes it easier for you to meet the stricter legal requirements governing data collection in certain parts of the world, by helping you handle the process of receiving consent to collect user cookies. This also allows you to show ads to users living in those areas.

ow-electron comes with a built in CMP, which your app can utilize out of the box. This allows you to:

  • Check if a user needs to be informed of the CMP
  • Show them the CMP itself if necessary, applying any settings they use to the entire ow-electron package

The relevant users should then be informed about the existence of the CMP, as well as where they can find it in the app.

Introducing the CMP​

There are two ways to introduce the relevant users to the CMP:

  • During the app's installation - Recommended
  • On the app's first start, as part of the First Time User Experience (FTUE)
    • If you are migrating your app to ow-electron, this will also apply to the first time that existing users start the app after the update

For more infromation about the CMP and how to work with it, refer to Consent-Management-Platform.

Distribution Resources​

Overwolf provides several different hosting/distribution services for apps running on its different platforms. These services have been adapted to support Overwolf Electron, and include:

To get started with any of these services for your electron.js app, contact us.

App File Hosting (CDN)​

Deploying, distributing, and monitoring an app requires a CDN.

Overwolf Electron is built to seamlessly integrate with the Overwolf CDN, offering the following capabilities:

  • App release file hosting/distribution
  • Support for multiple release channels
  • Archive of all past releases, including older release files
  • App usage analytics (can be turned off)

All of this is then managed from within the Overwolf Developers' Console.

Customizable Installer​

Your app's user experience starts as soon as the user runs it for the first time. To help you make it a success from the very start, we have adapted the Overwolf Installer, making it also work with ow-electron.

This installer can (optionally) handle any of the following:

  • Tracking of installation UTM Parameters, which will be shown in your app's Dashboard.
  • CMP flow introduction (for users living in countries where that is required).
  • Desktop shortcut creation (as well as allowing the user to avoid creating one).
  • App installation folder control.

*Apart from that, most of the installer's text/graphics can be changed/configured to fit your specific app. For more details, see Overwolf Installer.

Supported UTM Parameters​

UTM parameters allow your team to better track the installation sources for your app. Currently, the following three parameters are supported in the custom installer:

  • utm_source - "Identifies which site sent the traffic, and is a required parameter".
  • utm_medium - "Identifies what type of link was used, such as cost per click or email".
  • utm_campaign - "Identifies a specific product promotion or strategic campaign".
Retrieving UTM parameters in runtime

Once the app finishes initializing, its UTM parameters can be retrieved through the API, under the app.overwolf.utmParams field.

If you have any more questions about the installer, or wish to see if it is right for your app, feel free to contact-us.

Electron Updater Endpoint​

Electron comes with a built in automatic app updater, which handles all update-related matters on its own. However, in order for Electron to be able to automatically update your app, it must be configured with a consistent endpoint it can check against for updates/download updates from.

For Overwolf Electron apps that choose to use our App File Hosting, Overwolf handles the maintenance of this endpoint.

Setting up the updater endpoint​

In order to set up the endpoint, simply add the following to your main .js file:

Setting up ow-electron auto updates
const { autoUpdater } = require("electron-updater");
...

autoUpdater.setFeedURL({
  provider: 'generic',
  url: `https://electron-updates.overwolf.com/electron-updates/electron/${your_app_id}`
});