Integration with Web Renderer (Javascript Package)

Integration Steps:

Please follow the below steps to integrate the Avataar Renderer Javascript Package on your website:

Create an html element with a specific id attribute.

Example :

<div id="alhena-exp"></div>

Once the element is created, add the following script to your webpage to import the javascript package provided by Avataar.

<script src="https://web2.avataar.me/alhena-js/alhena-0.1.131.js"></script>

Post importing the package, add the following code snippet to your script tag providing the details (config URL and auth token)of any particular SKU which you want to render. Your CSM will share the process to get the config URL.

alhena.render({
elementId: <HTML-ELEMENT-ID>,
configLink:<CONFIG-URL>,
token: <TOKEN>,
});

*References :

HTML-ELEMENT-ID -> Where do you want to render the experience CONFIG-URL -> your experience config URL

TOKEN -> your token

Sample :

Use the config URL and token from the below example for testing:

<!DOCTYPE html>
<html lang="en">
  <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,       user-scalable=no">
    <style>
      #alhena-exp {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="alhena-exp"></div>
    <script src="https://web2.avataar.me/alhena-js/alhena-0.1.131.js"></script>
    <script>
      alhena.render({
        elementId: "alhena-exp",
        configLink: "<CONFIG_URL>",
        token: "<TOKEN>",
             });
    </script>
  </body>
</html>

PreviousIntegration with Web Renderer (React Package)NextIntegration with Android Renderer

Last updated 1 year ago