It's important to understand that as of today, April 29, 2011, Google sites will not embed a script or an iframe (like Voki) as it considers such elements unsafe. There is however a work-around that we can use to make this happen.
- First, create your voki on the voki site.
- Once you have set it up the way you like, click Publish and copy the embed code.
- Paste it in a TextEdit document, a word processing document or a sticky; anything like this will work. (The reason for doing this is that we will only need a part of that embed code, not the entire text, but the Voki site doesn't seem to let you highlight parts of the code, just the code in its entirety).
- Keep this document open and at your fingertips.
- Now go to your site and the page where you would like your talking avatar to appear.
- In the EDIT mode on your Google page, click on INSERT, scroll down to the very bottom of that drop-down window, and select MORE GADGETS.
- In the next window, select Add Gadget by URL and copy and paste this address:
- In the next window, paste your avatar's source code. See in the example below (copy and paste the part of the code after the word "VALUE" excluding the quotations marks, only the text I highlighted in red and made into a separate paragraph:
<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0
src="http://c.gigcount.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEzMDM5MzA1NjQwNDkmcHQ9MTMwMzkzMDk2MDE*OSZwPTk3NTA3MiZkPTAwMCUyMC*lMjBWb2tpJTIwV2lkZ2V*Jmc9/MSZvPTJlMzE1MWMwMzhhZTRkODBiNWFkZWE5ZDU3ZDcyMjFhJm9mPTA=.gif" /><object height="267" width="200" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" id="widget_name"><param name="movie"
<param name="quality" value="high" /><param name="allowScriptAccess" value="always" /><param name="width" value="200" /><param name="height" value="267" /><param name="allowNetworking" value="all"/><param name="wmode" value="transparent" /><param name="allowFullScreen" value="true" /><embed height="267" width="200" src="http://vhss-d.oddcast.com/vhss_editors/voki_player.swf?doc=http%3A%2F%2Fvhss-d.oddcast.com%2Fphp%2Fvhss_editors%2Fgetvoki%2Fchsm=6d9c704d6ddfe527297bd997bc18efe0%26sc=3797803" quality="high" allowScriptAccess="always" allowNetworking="all"
- Adjust the size and the name to your liking. I found it better to not include a border around the gadget.
- If you are not happy with the way your page looks, to change properties of your avatar, turn on the edit mode, select the gadget and in the floating menu select Properties. You can also adjust the Wrap if you have text and wish to have it wrap the avatar, and position your gadget on the left, right or in the center of the page.
- Once you have embedded your avatar, any changes you make to it on the Voki site will transfer to this one too, so you don't have to redo it.