Your comments

Gil,

I just started to evaluate SitePal, so the code is on my development machine at home.   But basically here is the problem:

In Angular, the main index.html file DOES NOT CONTAIN ANY CONTENT, so I cannot place the <script>AC_VHost_Embed() ... </script> code there.   (I CAN, and everything works, but the avatar just appears at the bottom of all the dynamic content).

So my attempt was to place the <script>AC_VHost_Embed() ... </script> code inside an Angular component.   This however CANNOT BE DONE DIRECTLY, because angular does not allow <script> tags in component templates.   

There is a well known trick to overcome this, is by dynamically generate the script content:    So inside the component's ngOnInit() function:


let div = this.document.getElementById('sitepal-face'); 

let script = this.renderer.createElement('script'); 

script.type = 'text/javascript'; 

script.text = 'AC_VHost_Embed(xxxxxx,300,400,"",1,0, 2722993, 0,1,0,"a81aeeadcc25ae0ec25d723653006161",0);'; this.renderer.appendChild(div, script);

When I do this, the <script> tag DOES APPEAR in the DOM, but I get an error:

core.js:6142 ERROR TypeError: Cannot read property 'style' of null
        at vhsshtml5_load2D3DHTMLContent (sitepalPlayer_v1.js:1)

My thought was that somehow the order of loading is wrong, so to delay the loading of the avatar, I added an "onclick" handler to the <div> elelment (with the id of "sitepal-face").   So the avatar would only load when the div was clicked.

This DOES WORK, except when the avatar is loaded, ALL OTHER DOM elements on the page are removed.