Making PlayCanvas talk to the website it's hosted in?

I’m building a website which has different types of content, some PlayMaker games and some other things.

I’d like to get Playmaker to interface with the website in someway, specifically I need it to tell the website when a game is done or specific actions are carried out, the website can then make relevant http requests to our backend.

Alternatively PlayCanvas could make those requests if possible? It will need to take in an id_token from the embedded website for authentication for the backend.

Does the website have an API that you can use? PlayCanvas is pure Javascript so any examples of communication to/from sites in Javascript (browser) will work fine.

how would that work? I tried doing something like window.onPlay = function in my website and then tried calling window.onPlay() from playcanvas (embedded in an iframe in the website) and it didn’t work, got a ‘window.onPlay is not a function’) :-/

I tried following the guide here to post a message to the embedded playcanvas, I’m using React so that might be causing issues:

My entire class:

class GamePlayer extends Component {
    componentDidMount() {
        this.props.onPlay();
    }

    doThings() {
        var iframe = this.frame;
        iframe.contentWindow.postMessage({
            score: 10,
        }, "https://playcanv.as");
    }

    render() {
        return (
            <div style={{ width: '100%', height: '100%' }}>
                <iframe ref={(input)=>this.frame = input} id='lol' style={{ width: '100%', height: '500px' }} src='https://playcanv.as/b/NOKFtsuX/' />

                <button onClick={this.doThings.bind(this)}>Dude</button>
            </div>
        );
    }
}

and in playcanvas I have this:

window.addEventListener("message", function (event) {
    window.alert("OK we got the message");
    if (event.origin === "http://example.com") { // always check message came from your website
        var score = event.data.score;

        // call API method one:
        window.setScore(score);

        // call API method two:
        var app = pc.Application.getApplication();
        app.fire("score:set", score);
    }
}, false);

Nothing happens when I click…

Though I can send messages upwards from playcanvas in window.onmessage

Is your domain "http://example.com"? If not, it will never enter the if statement? Have you tried putting a breakpoint in the event callback on the PlayCanvas to see if it receives any messages?

Ah it’s not but above that line is ’ window.alert(“OK we got the message”);’ which doesn’t execute so I’m basing my assumption it’s not working on that.

Can I put a breakpoint in playcanvas to see if the function is called when it’s embedded in an iframe in a seperate website?

I’m currently publishing the app then embedding the url in an iframe on the react website.

Should be able to via the DevTools.

Dumb question: Have you checked that this.frame is valid and pointing to the right DOM?

Thinking about it, I remembered that PlayCanvas wraps there builds in an iframe as well so you may have an iframe in an iframe. Try adding an /e before the /p to get to the ‘raw’ app.

eg https://playcanv.as/p/BAuoCOx6/
becomes https://playcanv.as/e/p/BAuoCOx6/