Under review

How to embed a scene in angular

mumo-dev 1 week ago in SitePal Platinum updated 6 days ago 4

Am building Angular 7 project. I want to embed a scene/avatar in an angular component. Currently, am dynamically inserting the script with AC_VHost_Embed function which overrides everything in the DOM and keeps the page loading forever. How do I solve this issue or is there a better way of working with your API in angular projects

Under review

Hello mumo-dev -

As per our knowledge Angular includes HTML in the ng-modal.

if you place the embed code of your scene where the HTML of your web page's body is setup, then the code should fetch the scene without any issues, just like it does with normal HTML.

Please try and let me know how goes.



The SitePal Team

Placing the scripts tags directly in angular html components doesn't work because they get cleared.

Dynamically inserting the scripts to DOM overwrites everything. The avatar scene doesn't load

an example of my code snippet below. The loadScript(url) function is called in ngOnInit()


loadScript(url: string) { 

      const script = document.createElement('script'); script.innerHTML = ''; 

      const __this = this;
      script.onload = ()=>{ 

          __this.afterScriptAdded(); // when this is commented, the script is loaded with no issues. After adding it ,the DOM is overwitten . 


//ttsView is ElementRef to #tts directive in the html component

      script.src = url; this.ttsView.nativeElement.appendChild(script); 


  afterScriptAdded() { 

      const script2 = document.createElement('script');

      script2.innerText = "AC_VHost_Embed(71987259,300,400,'',1,1, 2663138, 0,1,0,'7dfb0b32433a64f9',0);";



Also I need to be able to access the api functions eg sayText() to make dynamic calls to the api using text loaded from the database. How do I get access to this functions and use them in a component?

I'll ask engineering to take a look and advise. Hope to have an answer in a day or two.