Skip to main content

Phase 2 - Develop Your App

Now that you have your app submission approved, you are ready to start developing your app! You should have received an email from your DevRel that includes links to help you develop your app and outline the next phases of your app development journey.

But before you jump into the development of your app, take some time to review the guides and best practices. These guides are designed to help you with your app's user interface (UI) design, ad placement (for monetization), and other important principles that will take your app from good to great!

The steps in this phase are designed to help you optimize the time you spend developing your app. At the end of this phase, you will be ready to submit your app to the DevRel QA team.

Step 1 - Deep dive into the framework​

Points to consider when choosing a framework:

  • Overwolf Electron:
    • Based on Electron.JS.
    • Flexibility of Operating system support.
    • Standalone installation options
    • Self branding.

Then use the documentation to review the available APIs in your chosen framework. Overwolf’s documentation in the Overwolf Electron section to better understand how to work with its components to build engaging in-game apps. In addition explore Game Events, and Overlay APIs to learn how to interact with game data and overlay features.

Overwolf provides you with a sample app to give you a head start in your development efforts. The Overwolf Electron sample app is designed to be used as a reference for developing your app for the Electron JS framework.

Step 2 - Setup your environment​

After your app idea has been approved and your account is whitelisted, you gain access to Overwolf’s development tools. Now you can develop your app in your favorite development environment with all your favorite development tools. Overwolf recommends that you use an IDE such as VSCode in order to take advantage of code completion, in IDE API documentation, integrated version control, debugging tools, and more. These tools will enhance your development experience and expedite development of your app.

To install OW-Electron:

  • @overwolf/ow-electron is a package based on the electron package, adding several new features to it.
  • @overwolf/ow-electron-builder is a package based on the electron-builder package, which supports building ow-electron apps.
  • @overwolf/electron-is-overwolf is similar to the electron-is-dev package and allows your app to check whether it's currently running as ow-electron, or as a base electron app.

Step 3 - App product guidelines​

A good starting point for understanding Overwolf’s UX/UI best practices can be found in the following articles:

  • Hotkeys are a key in-game interaction method in Overwolf apps. Make sure to assign intuitive defaults, let users rebind keys via the app’s settings, and provide clear, non-intrusive visual feedback to guide users during gameplay.
  • Second Screen Support is a valuable UX and business opportunity. With 30% of users having multiple monitors, this allows for seamless multitasking, persistent engagement, and increased monetization potential throughout a session.
  • Responsive Layouts help your app to adapt smoothly to different screen sizes and resolutions. Prioritize clarity and usability within compact layouts, especially since Overwolf apps aren't always displayed in full-screen. Ensure key information remains accessible and well-organized at all sizes.
  • Ad Integration is best when planned for early in the design process. Unlike web layouts with flexible grids, ads in Overwolf apps directly affect layout and flow. Integrate them thoughtfully across screens to maintain a balanced user experience while supporting monetization goals.

App-specific design experience​

Follow these guidelines to tailor your app’s functionality and design in order to create a unique experience that enhances gameplay and provides value to players.

  • Personalization—offer options for users to customize their experience within your app.
  • Inspiration from other apps—explore similar apps on the Overwolf Appstore for design ideas and feature inspiration. This will help you make your app more engaging and suited to individual preferences.
  • Learn about app-specific experiences—provide the best possible user experience and increase user retention.

Next steps​

So, have you read through all the steps above? Have you familiarized yourself with the Overwolf Electron framework? Have you set up your development environment to help you develop your app? Have you optimized your app using the best practices in the guides referenced above?

Excellent!! Now you are ready to move onto the next phase of your journey!

This is where you will pre-test and submit the first version of your app for review and QA by the DevRel team!. Overwolf will test your app and verify that it meets the guidelines and standards above, and is ready for launch.