Edit

Overwolf Basic Sample App

In this article, we'll use an example in order to learn how to build Overwolf (OW) apps that respond to real time game events and display content in an overlay while playing. If you are new to the concept of Overwolf apps, this is a great place to get started, and you can use it as a base for your own project.

The sample app's functionality is pretty straightforward, it auto-launches when the user launches one of the supported games:

• Fortnite, CSGO, League of Legends, Escape From Tarkov, Minecraft, Overwatch, PUBG, Rainbow Six Siege, Splitgate: Arena Warfare, Path of Exile, Valorant, Dota 2, Call of Duty: Warzone or Warframe.

The app reads all real time game events as you play. To demonstrate overlay features, the sample app prints all in-game event data collected into an overlay-based component.

The sample app is built with JS code and TypeScript. An official Vue, React, and Angular version will be added soon. Until then, check our community snippets page for an unofficial Vue version and other code samples, like React boilerplate for Overwolf apps and more.

Download

It's highly recommended to follow the below steps for setting up the sample app, including downloading the source code and building it manually.

For those who need it, here is a direct download link to the latest version:

Download here.

Video guide

You can find a video tutorial that guides you on downloading, building, and using the sample app.

Sample App Functionality

For demonstration purposes, the sample app has been configured for one of the supported games listed above. It loads when Fortnite starts and reads Fortnite in-game events. You can easily customize this example to fit other games.

The basic functions our sample app demonstrates:

• Automatically launch when the game is loaded.

• After registering to the overwolf.games.events API, the app can receive real time events from the game.

• Identify specific events and respond as defined.

• Define a custom hotkey to be used in-game.

• Interact between app windows.

• Background controller that manages data transfer.

Setting up

In order to run the app, you must first complete several steps.

1. Install Overwolf Client

Download and install the Overwolf desktop client.

2. Install NodeJS

Download and install NodeJS.

After installing, run the following commands in your favorite IDE terminal (Visual Studio Code is free and easy to use)

node -v //returns your node version, if installed
npm -v  //returns your npm version, if installed

If they run successfully, proceed to the next steps.

3. Download the source code

This repository contains the Overwolf sample app.
Download the app's source code from the repository as a zip file, and extract it to a new folder on your machine.

4. Build the app

In your terminal, run the following commands:

cd ts //the path to your extracted 'ts' folder here
npm install //install all modules listed as dependencies in package.json
npm run build //create a "dist" folder with the compiled components

5. Install the app as "unpacked extension"

Usually, all the apps in the Overwolf app store are OPK packages that can be installed with a double-click. Unlike OPK Packages, while you are developing an app, you want to load the unpacked code, change it, and test it regularly.

For this reason, in addition to the OPK installation, you can load the app as an "unpacked extension":
(Note that to do that you have to whitelist your OW username as a developer).

• Open the Overwolf desktop client settings (by right-clicking the client and selecting "Packages"
  Or by clicking on the wrench icon in the dock and going to the "About" tab => "Development Options").

• Click on "Development options".

• In the opened window, click on "Load unpacked extension" and select the extracted ts/dist folder.
  This will add the app to your Overwolf dock.

• Make sure you are logged in to the OW client. Otherwise, you will get an "Unauthorized App" error message. (Click on the "Appstore" icon in the OW dock to login to the OW client).

• Click on the app's icon in your OW dock to run the app.

important

Each app has a unique id (UID) that is generated using the "name" and "author" strings. Once an app is published on the Appstore, its UID can't be changed.

The same goes for the sample app, so make sure not to edit the author or app name in the manifest. It will prevent loading the app as an unpacked app.

Screenshots

This is how the sample app's main window looks like: a desktop window displaying some textual information.

The real action will take place in the in-game window - once you launch Fortnite, the desktop window will be replaced with this in-game window:

This is the injected in-game window overlayed on your game screen. The window displays game events, collected data, and a sample advertisement for monetization.

When you hit the close button, the app will close itself.