Overwolf

Overwolf

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

›Submit Your App

Getting Started

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

Sample App

  • The Basics
  • Components
  • UI components
  • Architecture

Test Your App

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

Submit Your App

  • App submission basics
  • Custom Installer
  • App Knowledge base

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
Edit

Custom Installer

Customizing Your App Installer

Overwolf supports per-app custom installer pages. To use this feature, third party developers need to create HTML pages to be displayed during the installation process. This document will specify the steps needed to create a custom installation experience.

Facecheck Facecheck Facecheck Installer Facecheck Installer

1. Create HTML file

  • Create the HTML page you wish to display during the installation and name it "index.html".
  • There are 2 distinct phases to the installation process: downloading and installing.
  • The maximum element size is 640px x 288px.
  • For each phase, different content can be displayed.

The following can be used as a template:

index.html

<!DOCTYPE html>
<html>

<head>
    <script src="script.js"></script>
</head>

<body>
    <div id="down" style="background-color: red; width:640px; height: 288px; display: none;">
    </div>
    <div id="stall" style="background-color: green; width:640px; height: 288px; display: none;">
    </div>
    <script>
        let language = CustomInstallerUtils.getLanguage();
        let installerState = CustomInstallerUtils.getInstallerState();

        switch (installerState) {
            case 'downloading':
                let downElement = document.getElementById('down');
                downElement.innerHTML = 'downloading, language is ' + language;
                downElement.style.display = 'block';
                break;
            case 'installing':
                let stallElement = document.getElementById('stall');
                stallElement.innerHTML = ‘Installing, language is ' + language;
                stallElement.style.display = 'block';
                break;
        }
        CustomInstallerUtils.notifyReady();
    </script>
</body>

</html>

script.js

function getUrlParameterByName(name) {
    var regex, results;
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    regex = new RegExp("[\\?&]" + name + "=([^&#]*)");
    results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
window.CustomInstallerUtils = {
    /**
     * This function will notify the installer that the page is ready
     */
    notifyReady: function() {
        parent.postMessage({
            isLoaded: true
        }, "*");
    },
    /**
     * Returns the state/phase of the installer
     * Possible values:
     * 'downloading'
     * 'installing'
     */
    getInstallerState: function() {
        return getUrlParameterByName('state');
    },
    /**
     * Will get the selected language
     * Possible values:
     * en - English
     * pt - Portuguese
     * de - Deutsch
     * ko - Korean
     */
    getLanguage: function() {
        return getUrlParameterByName('lang')
    }
}

2. Upload files to Overwolf

Overwolf does the next steps:
Please send the files to your dev rel manager or developers@overwolf.com, and we will build your custom installer and update you when it's ready.

4. Download and install

Download your app from the Overwolf Store. The installer should display the custom content.

Last updated on 2021-2-28 by eransharv
← App submission basicsApp Knowledge base →
  • Customizing Your App Installer
  • 1. Create HTML file
    • index.html
    • script.js
  • 2. Upload files to Overwolf
  • 4. Download and install
  • 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