Introduction

To use the VuppetMaster API, you have to inclue the VuppetMaster Script in your website. Simply add the the following script tag in the index.hml or load it dynamically in the DOM.

<script src="https://vuppetmaster.de/vmapi/v4/api?key=XXXXXXXXXXXX"></script>

In the dashboard of the Storybuild, ervery project has a license key:

Insert the license key from the Dashboard in the escript tag.

Now you need a div whre the avatar should be renderer.

<div id='webglconteiner'></div>

Now you have access the the VuppetMaster API and you can instanciate the VuppetMaster Render Engine

vm = new VM.Vuppetmaster();

With vm.api.start() the project will be loaded and displayed.

vm.api.start();

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. You can define the id in the options of the VM.Vuppetmaster constructor.

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.

#Jsfiddle

Jsfiddle