Html page to contain the Zing Tree iFrame and allow merge variables to be passed in and then capture custom variables when its complete

ZingTree_EmbeddedCrmWebResource.html

<script>
    // generate a unique guid to use with the session id
    function guid() {
        function s4() {
            return Math.floor((1 + Math.random()) * 0x10000)
            .toString(16)
            .substring(1);
        }
        return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
    }

    // this function gets called after ZingTree session to save the codes back to the case form
    function saveToCMP(){
        var entity = {};
        entity.amw_symptomcode = "";
        entity.amw_actioncode = "";
        entity["[email protected]"] = "/amw_reasoncodes()";

        var req = new XMLHttpRequest();
        req.open("PATCH", "/api/data/v8.2/incidents()", true);
        req.setRequestHeader("OData-MaxVersion", "4.0");
        req.setRequestHeader("OData-Version", "4.0");
        req.setRequestHeader("Accept", "application/json");
        req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
        req.onreadystatechange = function() {
            if (this.readyState === 4) {
                req.onreadystatechange = null;
                if (this.status === 204) {
                    //Success - No Return Data - Do Something
                    alert("saved to CMP successfully.");
                } else {
                    alert("there was an error! " + this.statusText);
                    //Xrm.Utility.alertDialog(this.statusText);
                }
            }
        };
        req.send(JSON.stringify(entity));
    }

// variables to pass to the ZingTree iFrame
var caseId = "";  // this would be the case number
var aboNumber = "1207834";
var treeId = "585060461";
var sourceAgent = "shane-test2";
var baseUrl = "https://zingtree.com/deploy/tree.php?";
var sessionId = treeId + "-" + caseId + "-" + guid();  // always ensures a unique but predictable pattern for session ids
var variables = "ABONumber&values=" + aboNumber;

// build our url with all the parameters
var zingTreeUrl = baseUrl + "z=embed&tree_id=" + treeId + "&access_key=&style=buttons&persist_names=Restart&persist_node_ids=1&notitle=1&nopermalink=1&agent_mode=1&source=" +  sourceAgent + "&session_id=" + sessionId + "&variables=" + variables;

</script>

<!-- zing tree iframe -->
<iframe id="zingTreeIFrame" width="100%" frameborder="0" style="height: 50em;" seamless src="">
</iframe>

<script>
    // set the iFrame scr via javascript so we can concat and build our custom url with all the relevant parameters
    document.getElementById("zingTreeIFrame").src = zingTreeUrl;


    // TODO:  need to catch some kind of event from the ZingTree iFrame in order to know that it is complete, ideally passing back custom variables.....or call the ZingTree API by session id and get the variables that way.
</script>
<script type="text/javascript" src="https://zingtree.com/js/iframeResizerSmart.js"></script>
<script type="text/javascript">iFrameResize();</script>