ProhomeApp

To use prohomeApp you need to follow next steps:

1. Add this application at product panel at admin

2. Add to the 'Prohome iframe' field link to index.html you want to show(more details about index.html below)

How this application will work with your index.html
First of all, you need to add a tag <script>to your index.html
Example:

JavaScript

<script>
    function messageListener(event)
        {
            let dataObj;

            if ( event.data.source && typeof event.data.source.startsWith == "function" || event.data && typeof event.data.startsWith == "function" && event.data.startsWith('/*framebus*/')) return;

            try
            {
                dataObj = JSON.parse(event.data);
            } catch ( error ) {
                console.error("Error parse JSON string!");
                console.log(event.data);
                return;
            }
            if (dataObj.action == 'set_data')
            {
                // this action will trigger right after this index.html will load on iframe. it will pass dataObj.data with product data
            }
        }

    
    // add this event to a button that you wanna trigger data save
    function onClickButtonSave(e) {
        if ( window.parent == window ) return;

        window.parent.postMessage(JSON.stringify({
            action: "app_save",
            data: // here you can passed data
        }), '*');
    }

    
    window.addEventListener("message", messageListener, false);
</script>

Product metadata store

For updating application params, use the entity update api in the metadata field and applications field

{
    "prohomeapp": {
        "config": {
            "name": "ProhomeApp",
            "start": "on-demand"
        },
        "data": {
            "url": "https://example.com/index.html"
        }
    }
}