Upgrade to our Platinum service and get your own custom designed 3D avatar
Bot Libre Forum

How to move the avatar in my website

by magatlaw posted Oct 23 2018, 20:40

Hi, 
I'm new to using Bot Libre and I just tried embedding an avatar into my new website and I can't seem to move it by using position:absolute, top or left html codes

Here's my code

</div>
<divid="avatar"style="position:relative;left:300px;">
<scripttype='text/javascript'src="https://www.botlibre.com/scripts/sdk.js"></script>
<scripttype='text/javascript'>
SDK.applicationId = "6052012661363275013";
varsdk = newSDKConnection();
varweb = newWebAvatar();
web.connection = sdk;
web.avatar = "20697301";
web.voice = "dfki-prudence";
web.voiceMod = "default";
web.width = "250";
web.createBox();
web.addMessage("Welcome to Magos' E-Learning Website", "happy", "", "");
web.processMessages();
</script>
 
</div>


by admin posted Oct 24 2018, 11:56

The createBox() function in the embed JavaScript code is what add a <div id="avatar-avatarbox"> to the page for the avatar. The div is positioned as fixed on the bottom left by default.

You can change the position of the "avatar-avatarbox" element in css, such as a style tag, for example:

<style>#avatar-avatarbox { top: 10px; bottom: initial; right: 10px; left: initial }</style>

If you want to position the avatar inside a div in your page, then you either need to reparent it in JavaScript, or create the <div id="avatar-avatarbox"> with all the correct children (canvas/video divs) and not call the createBox() function.

To reparent the JavaScript code would be something like this (after the createBox() call):

<script>
var avatarDiv = document.getElementById("avatar-avatarbox");
var newParent = document.getElementById("my-avatar-div");
newParent.addChild(avatarDiv);
</script>

Thumbs up: 0, thumbs down: 0, stars: 0.0
Views: 1715, today: 0, week: 4, month: 23

by magatlaw posted Oct 24 2018, 20:54

Thank you so much for replying.


Thumbs up: 0, thumbs down: 0, stars: 0.0
Views: 1640, today: 0, week: 4, month: 18

Id: 24725425
Tags: avatar, web
Posted: Oct 23 2018, 20:40
Replies: 1
Views: 2214, today: 3, week: 10, month: 22
0 0 0.0/5