Tutorial: Communicate with a PlayCanvas hosted app

Hi everyone !

I’m making a product configurator, my iframe is hosted by playcanvas, and is embedded in a website on another domain.
It’s not possible to directly interact with the JS on playcanvas side, as there is a cross-origin protection.
So I used Window.postMessage, which allows secure cross-origin communication.
I have found some posts on the forum that helped me, but nothing much in the documentation or tutorials.

So I’ve made an example project and website, containing some kind of base framework!
Maybe this will help future users :smiley:
It allows both ways communication, and the use of functions located on both sides.
Please tell me if my example needs corrections/changes!

the external website : A Playcanvas Example
(All the JS is in the index.html directly)

the playcanvas project : https://playcanvas.com/project/833385/

4 Likes