Getting started


Introduction

Implementing a Charamel Avatar into a website is very easy. Just insert three lines in your index.html and a Charamel Avatar appears.

<script src="https://vuppetmaster.de/vmapi/v4/api?key=AFMV3-KZRYV-6C263-JM78A"></script>
<style>
  #webglcontainer
  {
    position: absolute;
    width: 400px;
    height: 400px;
    background-color: #888888;
  }
</style>
<script>
  window.onload =  () => {
    vm = new VM.Vuppetmaster();
    vm.start();
  };
</script>
</html>

Sample Page

And here a minimalistic htm sample page:

<!doctype html>
<html lang="de">
  <head>
    <script src="https://vuppetmaster.de/vmapi/v4/api?key=AFMV3-KZRYV-6C263-JM78A"></script>
    <style>
      #webglcontainer
      {
        position: absolute;
        width: 400px;
        height: 400px;
        background-color: #888888;
      }
    </style>
    <script>
      window.onload =  () => {
        vm = new VM.Vuppetmaster();
        vm.api.start();
      };
    </script>
  </head>
  <button onclick="vm.api.playAnimationByName('welcome')">
  Welcome
  </button>
  <body>    
    <div id="webglcontainer"></div>
  </body>
</html>

The DIV with the id 'webglcontainer' is the area in which the avatar will be rendered.

Jsfiddle

To see and understand the easy implementation, please have a look in the JSFiddle Playground:

Here you are able to see a simple implementation of a Charamel Avatar and how easy it is to control the Avatar.