​
Before You Begin

Before you start setting up ads, make sure to contact the Overlayed team to discuss ads on your app. We’ll discuss ad positioning, ad units, and more. It’s crucial to start this process early so that we have time to setup the ads before you start using them.

​
Installation

To start with ads, you’ll need to install the @overlayed/ads package: 
pnpm i @overlayed/ads

​
Setup

​
Electron

On the electron side, for any BrowserWindow or RenderWindow you create and intend to show ads in, you’ll need to call: 
overlayed.ads.registerWindow(browserWindow);
Under the hood, registerWindow does two things:
  • Sets up a link handler to open ads (and block malicious behavior!)
  • Sets the user agent of all requests, which removes non-standard portions of the User Agent string which may trigger IVT (invalid traffic).

​
Preload

Within your electron app’s preload script, you’ll need to add the following import: 
import "@overlayed/app/preload";
This will automatically execute code that facilitates Overlayed’s communication between the electron process and rendering process.

​
Render Process

Within the render process, theres a few more things to setup:

​
Initialization

Call the init method when your HTML/JS first loads: 
import overlayedAds from "@overlayed/ads";

overlayedAds.init();
You can call this function as many times as you want, it will only execute once.

​
Adding the ads script

This script can be added in a variety of ways, for example: With HTML (note the defer attribute): 
<script type="module" src="//js.rev.iq/YOUR_APP_DOMAIN" defer></script>
or with JavaScript: 
const script = document.createElement("script");
script.type = "module";
script.src = "//js.rev.iq/YOUR_APP_DOMAIN";
document.head.appendChild(script);

​
Conclusion

That concludes the required setup for ads. Check out the configuration guide for more information on how to configure ad units, conditionally disable ads, and more.