Overlaid avatar that says something different each time its loaded

ryan 12 years ago updated 12 years ago 25
My goal is to pockmark my site with a little '?' button that when clicked opens up my avatar in her overlaid format - but I'd like her to be able to say a different audio for each button. I've tried it using the sayAudio command, but since I'm not a programmer, I'm certain my syntax is off or something when I'm trying to call both the overlay and the sayAudio command simultaneously. If anybody knows how to accomplish this, I'd appreciate the help.
Ryan -
why not setup a different Scene for each one of the "?" buttons?
Your SitePal account supports unlimited Scenes - seems like the simplest solution.
Hope this helps
Thanks Gil. I thought of that. But the problem I encounter is that there are multiple "?" buttons on each page and the overlay command from one button seems to interfere with the others on the page too.
I think the most ideal solution would be to use the sayText command and just add my text into the code for each button. My problem is that I am unsure how the javascript call should be structured to invoke an overlaid avatar, and pass either the text to be spoken thru the sayText command, or just call an audio with the sayAudio command.
Sure - that can work.
You would want to open your Scene initially in Min mode.
Then when user clicks "?" call overlayOpen - and sayText (or sayAudio) right after.
I don't have a relevant example handy - I'll see if I can find.
I cannot get my overlaid avatar to say something different using javascript. Nothing I do with sayAudio or sayText influences the avatar. It just keeps on saying the same thing. I probably have my code structured incorrectly. I just need to see an example of code that opens an overlay, and passes either a sayAudio or sayText command along with the overlay call.

Also, I do not want it minimized. I only want the avatar to appear when a button is clicked, and then disappear when the audio is finished.
Ok I read the TTS API notes and it seems that sayText will only work after a scene is fully loaded. So since my avatar is only supposed to open and close based on pressing the '?' button, I don't think sayText will work for my application. So I guess it's sayAudio or nothing at all.
I'm beginning to think that sayAudio won't work for what I'm doing too. sigh.

When I have 2 or more instances of an avatar needing to be overlayed on a page, the overlay javascript command controls both instances identically and only 1 audio file is spoken for both instances. So, does anybody know how to assign an ID or something to a particular avatar embed code so that the javascript overlay command affects only the overlay it is intended to?
Ryan -
we're looking to put together a working example for you.
will advise,
Hi Ryan,

Please look at the example below. Please view the source code and look for the comments for how the desired behavior should be implemented


Please feel free to send an email to- support@sitepal.com for any issues you are having.

Thanks. I figured modals and iframes would do it. I just thought there was a way to use the overlay feature, 1 avatar, multiple audios, and the client API to accomplish this. I am glad that the modal shuts down after they finish speaking. Is it a time out, or does it receive a call that marks the end of the audio?
Oh i see it is a time out in milliseconds. I suppose I could just try to account for the load/buffer time and tack on a few extra seconds. But is that reliable? What about folks with dialup? The modal may close before the avatar finishes speaking. Is there a way to pass the vh_talkEnded() event to the modal? or something? lol
Hi Ryan,

Having multiple Scenes or Multiple api calls on a same page would cause JavaScript conflict.

Yes, the window closes by a timeout using the below function on the Embed page.

var t=setTimeout("closeMe(1)",7000);

the '7000' in this instance is 7 seconds, you can set the time individually for each scene. to what you wish to have.

Please let me know if you have any questions.

We are not using a JavaScript Embed code, so the events vh_talkEnded do not get fired. So best way to do it is to have a longer timeout.

Ok no problem. At least this will work. If I can get the window to be transparent, and have no close button, the effect will work.
Hi Ryan,

I just checked the code again. We are using document.ready function, so the timer wont load until the scene is loaded- or the document within the frame is ready, and .swf does not buffer, so on a slow connection initiation will be slow, but the audio, wont cutoff.


I will test and get back to you.

Btw - this is probably a really good tutorial or example to post because I'm sure others want to do the same thing.
Yes - it has crossed our mind, we'll be cleaning it up and posting it in the support section.
Hi Ryan,

I have added a new parameter, that makes the background transparent.

Also, on the third scene, i have disabled closing of the scene by clicking outside the player.

Please clear cache and reload the page.

You know what? I'm having one of those jquery / javascript conflicts. I've built my site on weebly and there is already a modal script running that does not use jquery. And its causing a conflict. Unfortunately, the script that is running already seems to be only capable of displaying images. So no iframes or anything like that. I suppose I may just substitute a pure javascript modal in place of the jquery one you provided rather than adding a no conflict patch. But I appreciate all the thought you've put into this.

On another note, I've been tinkering with other ways to accomplish the goal I have. Lets say I start with a minimized avatar floating on the top left of the browser. And suppose I have small buttons on each page. Can those buttons be set to activate or 'maximize' the minimized avatar and invoke a sayText?
Do you have a link to your page where I can see the problem happening?
I'd be glad to email it to you. My site is not live yet. And we're trying to keep it under wraps till we launch.
You can email it to support@sitepal.com

Jquery uses Javascript,

So my guess is that its blocking external JS files,which are used on the page. But I would like to see the calls that were made. thanks for your patience.
Yeah it could be blocking. They seem to be a fairly open platform, so it would be odd, but maybe. And I've bumped into the jquery / javascript conflict before. I realize jquery is pure javascript, but for some reason, a modal done in pure javascript cancels out a jquery script running on the same page.

Ok I'll send an email when I get back from lunch.