Integration of Experiences via Creator (Javascript Package)

Integration Steps:

Please follow the below steps to integrate the Creator Javascript Package on your website

Create an html element with a specific id attribute.

Example :

 <div id="creator-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/creator-js/creator-0.1.46.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 you want to render. Your CMS will share the process to get the config URL.

creator.render({
elementId: <HTML-ELEMENT-ID>,
configLink:<CONFIG-URL>,
token: <TOKEN>,
env: “production”,
onScrollProgress: <CALLBACK-FUNCTION-ON-EXP-SCROLL>
});

References :

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

TOKEN -> your token

Env -> Production

onScrollProgress -> a callback function that returns how much the scroll experience has been evolved.

Sample :

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

<!DOCTYPE html>
<html lang="en">


  <head>
    <style>
      #alhena-exp {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="creator-exp"></div>
    <script src="https://web2.avataar.me/creator-js/creator-0.1.46.js"></script>
    <script>
      creator.render({
        elementId: "creator-exp",
        configLink: <Config.json>,
        token: <token provided by Avataar team>,
        env: “production”,
        onScrollProgress: onScrollProgress,
     });


     function onScrollProgress(value) {
        console.log(onScrollProgress", value);
        scrollObserver(value);
      }


      function scrollObserver(progress) {
        const observer = new IntersectionObserver((entries, observer) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting && entry.intersectionRatio >= 0.8) {
              console.log("Element is in the viewport!");
              //You can modify the logic if required
              document.body.style.overflow = "hidden";


              if (progress === 100 || progress <= 0) {
                document.body.style.overflow = "auto";
              }
              observer.unobserve(entry.target);
            }
            else {
              console.log("Element is not in the viewport!");
              document.body.style.overflow = "auto";
            }
          });
          threshold: 0.8 // Set the threshold to 0.8 (80%)
        });


        const targetElement = document.getElementById("creator-exp");


        if (targetElement) {
          observer.observe(targetElement);
        }
      }
    </script>
  </body>
</html>

Please refer to the above sample code to easily integrate our experience into your webpage.

PreviousIntegration of Experiences via Creator (React Package)NextGetting Started

Last updated 1 year ago

<!DOCTYPE html> <html lang="en"> <head> <style> #alhena-exp { width: 100vw; height: 100vh; } </style> </head> <body> <div id="creator-exp"></div> <script src="https://web2.avataar.me/creator-js/creator-0.1.46.js"></script> <script> creator.render({ elementId: "creator-exp", configLink: <Config.json>, token: <token provided by Avataar team>, env: “production”, onScrollProgress: onScrollProgress, }); function onScrollProgress(value) { console.log(onScrollProgress", value); scrollObserver(value); } function scrollObserver(progress) { const observer = new IntersectionObserver((entries, observer) => { entries.forEach((entry) => { if (entry.isIntersecting && entry.intersectionRatio >= 0.8) { console.log("Element is in the viewport!"); //You can modify the logic if required document.body.style.overflow = "hidden"; if (progress === 100 || progress <= 0) { document.body.style.overflow = "auto"; } observer.unobserve(entry.target); } else { console.log("Element is not in the viewport!"); document.body.style.overflow = "auto"; } }); threshold: 0.8 // Set the threshold to 0.8 (80%) }); const targetElement = document.getElementById("creator-exp"); if (targetElement) { observer.observe(targetElement); } } </script> </body> </html>