Load External Widget and run function on it only after Widget loaded and Visible in DOM

Keep calling until initialized

var waitForEl = function(id, callback) {
                //if ($('#widget_main_div').length != 0) {
                //    callback();
                //} else {
                //    setTimeout(function() {
                //       waitForEl($("#" + id).is(":visible"), callback);
                //    }, 1000);
                //}
                if(content.length !=0){
                callback()
                }
                else{
                   setTimeout(function() {
                       waitForEl($(content).is(":visible"), callback);
                    }, 1000);
                }
            };



 waitForEl('widget_main_div', function() {
                        //document.getElementById("site-content").style.width = "70%";
                        //document.getElementById("widget_main_div").style.width = "27%";
                        //var chat_icon = document.getElementById("widget_chat_icon");
                        //var close_icon = document.getElementById("widget_close_icon");
                        //$('#widget_chat_icon').css({"position": "fixed", "bottom": "20px", "marginRight": "20px"});
                        //$('#widget_close_icon').css({"position": "fixed", "bottom": "20px", "marginRight": "20px"});
                        //close_icon.addEventListener("click", function() {
                        //    document.getElementById("site-content").style.width = "100%";
                        //});
                        //chat_icon.addEventListener("click", function() {
                        //    document.getElementById("site-content").style.width = "70%";
                        //});
                        code
                        event listeners
                    });