Best Practices
In this section, you can find our best practices for developing and implementing your Overwolf app. It is the sum of experience of both ourselves and the entire developer community. As our platform grows, and as we learn from more developers’ experience, these practices and recommendations will be updated. We'd love to hear your suggestions and learn from your experience, so please feel free to send us your feedback at developers@overwolf.com or suggest it directly as an edit to the relevant page here using the 'Edit' button.
Product & Design
FTUE (First-Time User Experience)
Right after installing your app, the user who has never used it before probably needs guidance in order to understand the app’s features and easily make the most out of it. A good FTUE which showcases user value greatly increases the chances of retaining your users in the long term.
A good first step is creating an instructional page detailing main app features and explaining what user should do next to start using the app (if there's configuration or sign ups required). A larger scale FTUE will break down app features by providing a step-by-step tutorial for each.
App support page
- It's important to make sure that a user encountering an issue has somewhere to go and get help for it. Towards that end, you must create a support page before your new app goes live. This support page should include:
- FAQ – Common questions users ask you repeatedly, or just key messages such as - What Does your app do? How should one use it? What games are supported by it? etc.
- Troubleshooting – Issues reported by many users or recurring bugs should be posted along with solves.
- Your app’s changelog and patch notes so users can follow its progress and know what to expect when updating.
- Don’t forget to place a link to your support page in a prominent location in the app.
- Find an example for a support page here
Discord server
- We recommend setting up a Discord server and placing an invite link within the app.
- Discord communities are great for users to communicate feedback, report bugs and suggest new features.
- Place the Discord logo in the right side of the header, next to the minimize and X button.
- Clicking it will launch a default browser window with the invite link to the server.
- When in-game, the link will open the Overwolf browser.
Monetization
You can start making money by adding video or display advertisements to your app. To learn more, check out our Ads SDK Documentation.
Forgivable ads policy – Overwolf apps and ads should never interrupt a game or harm a gamer's experience while playing. That's why we do our best to figure out where and when ads will not bother users - loading screens for example. Please follow our full Advertising Policy.
An example for a 400×300 video in the Spawning Tool app:
Spawning Tool
Tooltips
- Don’t forget to add tooltips to in-app buttons or displayed data, as they greatly increase the cohesiveness of your app. Make sure to make tooltips short and to the point.
- An example for a tooltip in the Legendary Builds app:
Legendary Builds
Ask for feedback
- Getting feedback from users is essential for your app’s success. Make sure users can share feedback regarding the app easily, preferably with an in-app link or interface.
- Based on the Facecheck team's experience with this feature, adding it in-app improves reviews and increases feedback.
- Example for this implementation:
Facecheck
In and Out-of-game behavior
- Decide how your app will behave both in and out of the game. Remember that most users will launch your app for the first time right after downloading it from the Appstore, so the first thing they'll see is likely an out-of-game app window. Make sure they’ll see a welcoming, simple and easy-to-understand screen even when they are not playing.
- Example for in and out-of-game behavior in the Legendary Builds app:
- In out-of-game desktop mode, users manually select a champion to check out builds:
Legendary Builds
- While in-game – The app automatically detects the player’s chosen champion and displays their builds:
Legendary Builds
Hotkeys
- When in-game, users don’t always have the time to click your app’s icon, so make sure to provide them with convenient hotkeys to show and hide your app during the game.
- Allow users to alter hotkey combinations from inside your app’s settings panel. More information about hotkeys can be found in the manifest.json and overwolf.settings API pages.
- An example for an app window allowing users to change the hotkey combination can be found in the Sample App.
Window controls
- Add window control buttons such as close and minimize to your app’s windows, there’s nothing more annoying for a user than not being able to close a window during a game.
App look'n'feel
- If your app is designed for a specific game, try to create a UI that will mesh well with the game’s look and feel.
- Check out this great example, Spawning Tool for Starcraft. As you can see, the app was designed to have a Starcraft-like look and fits right in with the game's default UI.
Spawning Tool
Create a conversation
- Ask your users to share their thoughts, opinions and suggestions after using your app or even before it. These insights can convert into a better and more successful app experience for them, and more success for you. One way for getting feedback is by opening feedback channels on Twitter and Reddit. These pages should be reachable via links shown in the app’s main or settings windows.
- Here you can see an example for a social and feedback channels strip in the Legendary Builds app window:
Legendary Builds
Plan ahead
- Think about the long run and about larger scales, will your app function well when handling ten or a hundred times more users? Does your database support your app’s future features? Try to find future bottlenecks that might impact users experience and work to solve them ahead of time.
Game’s intellectual property terms and conditions
- Before you start building your app for a specific game you love, go over that game’s guidelines for third party content, we won’t be able to publish an app that breaks these guidelines or infringes illegally on someone else's intellectual property. Here is an example for Riot’s (League of Legends) guidelines for community content and use of their IP.
Error notifications
Bugs and errors happen, and users hate them just as much as we do. Try to think about possible scenarios and situations while using your app where things could go wrong. List them out, and then create a concise error message for each.
Examples for possible Overwolf app errors:
- Game API is not currently available
- The user’s champion data couldn’t be fetched
- General network error
Example of error messages implemented in LoLwiz and Legendary Builds:
Legendary Builds & Lolwiz
Ad container placeholder
When creating an Ad container, apps must also handle cases where no Ad will be shown.
As a best practice, our recommendation is to create a simple placeholder image, surrounded by empty space. More specifically:
- Place an image (e.g. The app's logo, your company's logo, or even a mascot) underneath the Ad container, alongside text/any other details you want.
- Make sure that the image does not stick out from the rest of the app.
- The image + any other graphics should fit within a centered rectangle, and be no bigger than 250x250 pixels.
- The remaining placeholder must be flatly colored.
- The entire placeholder must be at the exact size of the Ad container, and must always sit exactly behind it, making it visible only when no Ads are loaded.
Example of a properly placed/sized placeholder:
Analytics
- We highly recommend implementing Analytics in your App, in order to ensure that you always have a grasp of how your App is working, and how users are interacting with it. More specific guidelines can be found here.
Technical
Windows
- Overwolf apps should act like native desktop applications and not like a website. Make sure you implement our best practices for using windows before implementing your own app to avoid basic mistakes. Focusing on desktop experience improves your app’s behavior and user experience.
manifest.json
- Use our JSON schema validator in order to locate missing or false data in the manifest file.
Overwolf APIs
- Understand all available API’s – After thinking up your app but before you code it, preferably, you should browse the API documentation section. Check out the available functions that could work for you and your app or help you implement the features you have in mind.
- I/O plugin – Make sure you know how to use the Overwolf simple I/O plugin, it allows you to read files from the local hard drive as well as get interesting information from the games own log files.
App’s size
- Since Overwolf apps are downloaded locally and are updated pretty frequently, size matters - and a heavy app will be noticed by your users immediately. Please make sure your app is as lean as possible by deleting unnecessary files, compressing image or audio assets being used and even downloading large files from the cloud instead of adding them to your app’s internal folder.
- We recommend using Websiteplanet Image compressor and TinyPNG to reduce image size.
Testing
- Test your app on a regular basis! Game developers and Overwolf constantly improve, change and add new features. By regularly testing your app, you will find out whether any of the changes broke your app.
- You can use the Overwolf Developers client to test your app on future Overwolf versions, please let us know if you see anything that is not functioning as usual or breaks.
- Test your app on various screen sizes, make sure your window doesn’t take over small laptop screens nor blocks the user from seeing the game’s action.
- Use your community to test your new app before publishing. Beta users can download and test your new app by using a unique link to the app’s page in the Appstore. Just contact us when your app is ready for beta testing and we will assist in making that happen.
- Visit this page to read more information about testing your app.