How to create a communication channel with an iframe inside my Overwolf window?

Do you have any best practice, for developers that want to wrap their web app / webpage with an overwolf window? I’m using an iframe to do that, but I don’t have an access to the Overwolf JavaScript object from my iframe.

The recommended way to access the overwolf object from an online web page loaded inside an iframe is to set up a communication channel using the postMessage method.

To do so:

Allow your app to load and communicate with your domain via externally_connectable configuration in the manifest.

Your web page should post a message to the parent window (the Overwolf app) containing the page.

In the Overwolf app add an event listener for “message” event and validate the origin of the message:

window.addEventListener("message", message => {
	if (message.origin !== "") {

	let data =;
	if (!data) {

	// do something interesting with the data

Make sure to handle cases where the iframe may not load or when an error may prevent setting the communication channel

(a fallback or retry mechanism)