Overwolf

Overwolf

  • Getting Started
  • Docs
  • API
  • Events Status
  • Blog
  • Q&A
  • Support

›Build Your First App

Getting Started

  • Getting started
  • App Creation process
  • SDK Introduction
  • Using our dev tools
  • Game compliance principles
  • Submit app proposal

Build Your First App

  • The Basic Sample App
  • Sample App Components
  • UX/UI Best Practices
  • Overwolf UI Components

Test Your App

  • App testing basics
  • Technical checklist
  • Product checklist
  • Marketing checklist
  • Community alphas

Submit Your App

  • App submission basics
  • Custom Installer

Monetize with Ads

  • Monetization overview
  • Ads Monetization Basics
  • Ads SDK overview
  • Configuring your Ads
  • Managing Ads
  • Current Ads SDK

Monetize with Subs

  • Subscriptions overview
  • Subscriptions user flow
  • Integrate subscriptions
  • Request an app plan

Maintain Your App

  • Submit an app update
  • Set app status
  • Support Your Users
  • App Knowledge base
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.

alt-text

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:

alt-text

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.

Last updated on 1/3/2022 by dendrobiummoniliforme
← Submit app proposalSample App Components →
  • Sample App Functionality
  • Setting up
    • 1. Install Overwolf Client
    • 2. Install NodeJS
    • 3. Download the source code
    • 4. Build the app
    • 5. Install the app as "unpacked extension"
  • Screenshots
  • Legal
    • Terms overview
    • Developer's terms
    • App terms
    • Overwolf terms
    • Overwolf Privacy policy
  • Support
    • Questions and Answers
    • Discord
    • Slack
    • Facebook
    • Twitter
  • Documentation
    • Changelog
    • API
    • App Creation Process
    • Best Practices
    • Game Events status
  • Information
    • Careers
    • Fund
    • Developers Blog
    • Overwolf Appstore
    • Advertise on Overwolf
Overwolf 2022