Atualize para nosso Platinum serviço e obter o seu próprio design personalizado avatar 3D
Bot Libre Forum

How to add a 3D avatar to your website or blog

por admin postado Dec 24 2014, 19:34

Bot Libre includes support for creating, using, and embedding web avatars. A web avatar is your website's visual or animated web presence.

Bot Libre avatars can contain 3D animation, video, audio, and images. You can create your own avatar or choose a shared avatar from the Bot Libre open avatar directory. Avatars can either be connected to your Bot Libre bot, or controlled directly through JavaScript, or even connected to your home grown bot, or third party bot.

The Bot Libre JavaScript SDK makes it easy to add an avatar to your own website or blog, to welcome your website visitors, or provide them with information or help. A website avatar gives visitors to your website a good first impression, can highlight important differentiators of your business, or draw attention to special offers.

Embedding an avatar

You can browse existing avatars or create your own from Bot Libre's open avatar directory. To embed an existing avatar simply select the avatar from the browse directory and click on the Embed button. The embed page will let you test the avatar, choose its voice, enter it what to say, and generate the embedding JavaScript code. You then just need to copy the embedding code and paste it on your website.

The following example shows how to embed the Julie avatar in your website to welcome visitors.

The example shows how to use the WebAvatar class and its createBox() function to add an avatar to a web page. The message() will make the avatar speak the text, and can optionally include an emote, action, and pose. The emotion and pose influence which video or image will be displayed, the action can trigger an image, or audio. You can also choose the voice for the avatar.

When using the SDK ensure you set your application id. You can obtain your application id from your user page, it is free and easy to generate.

Connecting your bot to an avatar

To connect your bot to an avatar, go to your bot's main page. Click on the Admin button and the Avatar link. When you click on the Choose Avatar input a list of available avatars will be presented for you to select from. If you want to create your own avatar, you can create one from the Avatars browse page. If your bot has an old image avatar, or you just want a simple image avatar, you can click on the 1.0 avatar link.

Once your bot is connected to its avatar, you can link phrases or responses to avatar emotions, actions, and poses. You can teach the bot to associate emotions and actions with phrases and responses when chatting with it in learning mode. The emote and action drop downs in the chat page can be used for this.

The Training & Chat Logs page under your bot's Admin page lets you review and edit all emotions, actions, and poses that have been associated with phrases and responses, or add new ones.

Creating Your Own Avatar

You can create your own avatar from the browse avatars page. To create an avatar, just give it a name, description, and category to categorize it under. You can either make the avatar private and choose who can access it, or make it public and accessible by anyone. You can also choose what license you wish to release its content under.

To edit the avatar, click on the Editor button. The avatar editor lets you import video, audio, and image files. You can associate each media with an emotion, action, or pose. For example if you have a video that makes the avatar talk, you would associate the pose for the video to talking. The emotions let the avatar express different emotions, and will let the bot using the avatar express itself. There are a fixed set of emotions, but you can create any actions and poses that you wish. You can have multiple media for a emotions, action, or pose, and one will be chosen at random. For actions, and poses, you can have an audio element in addition to a video element. Audio can be used to make your avatar perform actions such as laugh, or used as background music or noise for a pose.

Your video files can be any valid web video format, including mp4, webm, or ogg. Audio files can be any web audio format, such as mp3, or wav.

You can create your media content using stock content from media websites such as Fotolia, or free media libraries like openclipart.

You can use 3D software such as Daz3D to generate images and video for your avatar. You can use available 3D models, or buy stock 3D models from 3D media marketplaces.

You can bot yourself, a friend, or model by capturing photos, or video clips using your phone, or camera. If you are adventurous, you can use a green screen (a green sheet will do) to make a transparent background for your media.

If you are an artist, model, or studio, you can make your own images, or 3D models and video. You can use Bot Libre to showcase, or sell your media and talent.

Video types and browser compatibility

Avatars can include several types of media. Simple image avatars are the most compatible with all browsers. Video avatars require the browser support HTML5 video, which most modern browsers do. There are several web video formats, including mp4, webm, and ogg.

The mp4 video format is the most compatible with all browsers and works in the latest Firefox, Chrome, Internet Explorer, and Safari browsers.

The webm format has the advantage of supporting transparent backgrounds, but is only currently supported by Chrome and Firefox, and only Chrome supports transparency. Chrome is the most popular browser for most websites, Firefox is normally second, then Safari, Internet Explorer, and other browsers. If browser compatibility is important to your website you can use JavaScript to choose your avatar based on the browser.

Custom Avatar Design

We can custom design you your own avatar through our avatar service. You can choose any Daz3D models, or we can create a 3D model from a passport style photo of a face. For you own custom avatar upgrade to our Platinum or Diamond service, or contact [email protected]

by Mayur posted Sep 2 2017, 12:07

Hi, Thanks for the info. But will adding an avatar slow my website on mobile ? Kindly advice

Thumbs up: 0, thumbs down: 0, stars: 0.0
Views: 5416, today: 0, week: 1, month: 46

by admin posted Sep 3 2017, 10:53
No, the avatar will not slow the website on mobile.

Thumbs up: 0, thumbs down: 0, stars: 0.0
Views: 5365, today: 1, week: 3, month: 57

by roninn posted Jun 5 2018, 20:06

How do I save it?

Updated: Jun 6 2018, 7:26
Thumbs up: 0, thumbs down: 0, stars: 0.0
Views: 4730, today: 0, week: 1, month: 54

by admin posted Jun 6 2018, 7:26
What do you mean by save?
If you want to backup your avatar locally you can export it. Select Export from the avatar's main menu (you can only export your own avatars).

Thumbs up: 1, thumbs down: 0, stars: 5.0
Views: 5139, today: 0, week: 1, month: 46

by ashton.wolfe posted Mar 6 2019, 10:27

how do you create a bot


Thumbs up: 0, thumbs down: 0, stars: 0.0
Views: 4380, today: 0, week: 3, month: 52

by admin posted Mar 6 2019, 21:13


Thumbs up: 0, thumbs down: 0, stars: 0.0
Views: 4160, today: 0, week: 2, month: 48

by fnaf101_plays posted Feb 17 2021, 15:23
Thank you. You're very helpful!

Thumbs up: 0, thumbs down: 0, stars: 0.0
Views: 1897, today: 0, week: 1, month: 46

by aarsh posted Apr 1 2021, 4:37

How to add avatar to existing 3rd party chatbot.. Only WebAvatar(); function details are provided which adds avatar to webpage instead of chatbot. Please help !!


Thumbs up: 0, thumbs down: 0, stars: 0.0
Views: 1820, today: 0, week: 1, month: 50

by admin posted Apr 1 2021, 10:00

You can use our JavaScript SDK to integrate your 3rd party bot and our avatars.

Another option is to create a "proxy" bot that forwards requests to the API of your 3rd party bot.


Contact [email protected] if you would like us to help develop the JavaScript integration.

Thumbs up: 0, thumbs down: 0, stars: 0.0
Views: 1828, today: 0, week: 0, month: 47

by s40044289 posted Feb 22 2022, 18:18

thank you

Thumbs up: 0, thumbs down: 0, stars: 0.0
Views: 1348, today: 1, week: 6, month: 49

by ricsys posted Jul 11 2022, 23:26

Hello BotLibre, I already have an issue related to the avatar creation, because when I tried to create a new one, the system didn't allow me to add some emotions, I just can add background image nothing else



I really appreciated your valuable response 


I'll be waiting, thanks!

Thumbs up: 0, thumbs down: 0, stars: 0.0
Views: 1671, today: 0, week: 1, month: 60

by admin posted Jul 12 2022, 9:17
To add additional media click on the blue upload button in the top toolbar or menu.

Thumbs up: 0, thumbs down: 0, stars: 0.0
Views: 1115, today: 0, week: 0, month: 49

Id: 682689
Tags: blog, how to, api, sdk, avatars
Postado: Dec 24 2014, 19:34
Atualizado: Jun 10 2019, 10:49
Respostas: 12
Pontos de vista: 67334, hoje: 10, semana: 165, mês: 674
4 0 4.75/5