[SHORT] How to send data to custom code from Velo

This is a quick reply to a question that has been asked on Velo's discord.

Sometimes we need to use libraries in our project that are not supported by Wix. In this case, we need to use custom code to embed third-party code into our Wix website.

The problem is that this code sit "outside" of Velo, therefore we cannot call it from our code. The solution is to post messages from the Velo environment to our custom code.

We do that by using postMessage from the `wix-window` Module.

import {postMessage} from 'wix-window'

$w.onReady(function () {
    postMessage("page is ready");
});

In our custom code panel, we add a script tag to handle the message emitted by Velo.

<script>
    console.info("setting listenner");
    window.addEventListener("message", (event) => {
        if(event.origin !== "https://www.code.enhancement.studio"){
            return;
        }
        console.log("new message", event.data)
    }, false);
</script>

With this setup, we are able to listen and react to events happening within Velo. This is especially useful when working with external SAAS and other tracking tools.

Sources

• https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

• https://www.wix.com/velo/reference/wix-window/postmessage