How to embed a scene in angular

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.

Best,

Gil

The SitePal Team

Hello!

Just to let you know this issue has not been forgotten - our team is working on it.

We are looking to adapt an embedding technique that will work for Angular and other similar JS frameworks (eg React).

If you need your free trial extended while this is being investigated - we will be happy to do so. Send us a note to support@sitepal.com.

Thanks for your patience.

Gil

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);";

     this.ttsView.nativeElement.appendChild(script2);

}

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.

Cool

Hi is there an update on this? im trying to make sitepal work with reactJS 

Hello!

We've just posted instructions and code example for React JS - please see on our SitePal support page - 

https://www.sitepal.com/support

These instructions and code have been tried and tested by a couple of customers pre-release. Let me know how goes.

Angular - don't have an ETA yet... working on it.

hello Gil! thank you! yes i managed to get the avatar on my reactJS app following ur example. in the example, TTS is called when u click "Click here to say something". Do u have an example whereby sayText is called upon without clicking the text "Click here to say something" and called upon rendering of a new component.

Also, When the avatar loads, the first thing it says is "welcome to our website. take a look....". I did not call this function or audio anywhere in my app. is this a default audio of the avaratar? how do i disable it. Thank you!

Great! very glad to hear.

Suggestions & responses to your questions - 

a. please verify that you have replaced our embed code, from our example, with your own embed code from your own account. That is necessary in order for you to have control - so before doing anything else, please check that's the case 

b. in your account you need to enable your web page domain as a "licensed domain" - you can do so in your "Account Info" page. This is a security feature that is required to play dynamic tts. Check out technical note in our support page for more info if needed.

c. You can call 'sayText' api function at any time - provided it is after the SitePal Scene finished loading. To verify that's the case it is recommended to listen to the vh_sceneLoaded callback. Any sayText call made after Scene is loaded should work - assuming you have implemented a and b above. 

So for example - if you want to initiate speech upon the rendering of something on screen, that's fine.

The only caveat is that most browsers prevent media playback without user interaction with the page. If you attempt to play audio before the user interacts with the page (eg clicks any button on the page) - it may not work, though it will not cause any user noticeable error. Browsers differ in their implementation of this detail.

d. When the Scene loads, if the Scene is assigned an audio (in your SitePal account) and the Scene attributes are set to "play on load", then it will attempt to speak the audio (subject to the browser limitation outlined in c above).

To disable that - simply avoid assigning a permanent audio to the Scene. Select "none" as the audio for the Scene, or, set the Scene's playback attribute to not play-on-load.

Hope this helps. 

If you still encounter a problem - if you would like us to review your page and advise further send a link to your page to support@sitepal.com and explain what you are attempting to do and we will try to advise further.

Regards,

Gil

hi thank you very much for ur comprehensive support.

Im currently trying to make sayText to be called on component load (after the scene has finished loading). Right now i can only trigger sayText with a click by the code, <a href="javascript:sayText('May I show you what i can do? i would like to help you with several tasks today. First what',3,1,3);">Click here to say something!</a> . I have looked at the saytext example given by http://vhost.oddcast.com/support/examples/API/sayText/index.html but the demo for sayText on load doesnt seem to work :(. How exactly do you make this <SCRIPT LANGUAGE="JavaScript"> function vh_slideBegin(sceneNumber){ sayText("Welcome to my website!",1,1,1); } </SCRIPT> work for the react example you have provided. i get the error "sayText is not defined"

Any idea or code snippets on how i can make sayText to be called when component is rendered after the sitepal scene has loaded? haha how do you call the 'sayText' api function in the render function of react component without clicking a href tag?

I have done a and b. My avatart loads and i am able to call sayText when clicked. however i want sayText to be called when my component renders (this is after scene loads)

Hello!

The example you cited is deprecated (using previous generation of our technology )

Please reference API examples from our support page - specifically here - 

http://www.oddcast.com/support1/reference.html

I think the example you need is the second from the top - 

http://www.oddcast.com/support1/saytext_classic.html

Again - please be aware that most browsers (including all mobile browsers) will not allow playback on load.

But the example above demonstrates how to do it. Because of this limitation it makes sense to have some user facing prompt to initiate audio - whether implicit or explicit.

Hope this helps,

Gil

Hi Gil,

Thank you!! sayText works 70% of the time. 30% of the times, it raises the error: "header Err does != 'ID3' --Error!!!". Why does this occur and what should i do to work around it.

Hello!

Can you recreate these failures in our demo - www.ttsdemo.com?

if not - can you post a link to your test page where this problem can be seen?

Which voice are you using? What text input?

If you prefer not to post your link here - please send a note to support@sitepal.com and ask that it pls be forwarded to me.

Thank you!

Gil

Hi Gil, i have just sent u the test link in an email to support@sitepal.com. Do let me know if you have issues. thank you so much. I am using  sayText(msg,3,1,3) and { sayText(msg,5,1,3). the text input u can see in the test link i have just sent to that email address. I have asked it to be forwarded to GIl sideman

ok thanx

I'll take a look

haha did u receive the email, i now do get the error: Audio Requires User Input AbortError: The play() request was interrupted by a new load request. https://goo.gl/LdLk22--Error!!! and Audio Requires User Input TypeError: Cannot read property 'src' of null--Error!!!

Ive nvr seen this, is this new? What did i do wrong? Thanks!

Yes, received - and I just responded to you.  

Our engineer is looking into this and we will advise asap.