LogoLogo
  • 📘Knowledge Center
  • Before Getting Started
    • 🔷3D User
    • 🔷AI User
    • 🔷Merchandiser
    • 🔷Web Developer
  • CREATOR INTERFACE
    • 🔷Creator Home Page
    • 🔷Canvas / Workspace
    • 🔷Export
  • Creator
    • 🔷Getting Started
      • 🔹Sign Up
        • 🔹How to Sign up Using Gmail?
        • 🔹How to Sign up Using Apple Id?
        • 🔹How to Sign up Using Email?
    • 🔷Creator Navigation
    • 🔷Projects
      • 🔷How to use the Quick Access Tools?
      • 🔷View Port Settings
      • 🔷Generate AI 3D Models
      • 🔷Object
        • 🔷Upload Object
        • 🔹Transform
        • 🔷Node Hierarchy
        • 🔷Material Change
      • 🔷Scene
      • 🔷Image
      • 🔷Video
      • 🔷Audio
      • 🔷HDRI
      • 🔹Light
      • 🔷Text
      • 🔷Camera
      • 🔷Animation Timeline
      • 🔷Export
      • 🔷3D/AR
    • 🔷Assets
    • 🔷Community Showcase
    • 🔷Upload Your Catalog
      • 🔷Download Template
      • 🔷Upload File
      • 🔷Upload 3D Model
        • 🔷Product Information
        • 🔷Additional Details
          • 🔹Color Variant
          • 🔹Interaction
          • 🔹Dimensions
        • 🔷Proceed to Preview
        • 🔷Supported Files Formats
    • 🔷User Management
    • 🔷My Profile
      • 🔹How to Seek Help?
      • 🔹About
      • 🔹How to Logout from Creator?
    • 🔷Guidelines For 3D Model Creation
  • IDE - Low Code
    • 🔷Getting Started
    • 🔷IDE Functions
      • 🔹Add Object to The Scene
      • 🔹Add Light to the Scene
      • 🔹Add Environment to the Scene
      • 🔹Add Background to the Scene
      • 🔹Add Room to the Scene
      • 🔹Add Text to the Scene
      • 🔹Add Image to the Scene
      • 🔹Show/Hide Object
      • 🔹Show/Hide Image
      • 🔹Add Scroll Break Points
      • 🔹Add Animation to the Scene
      • 🔹Add Model Transformation to the Scene
      • 🔹Add Animation Block to the Scene
      • 🔹Play GLB Animation (pre built in GLB file)
    • 🔷Examples and Tutorials:
  • Developer Documentation
    • 🛠️How to Integrate Avataar Experiences?
      • 🛠️Integration with Web Renderer (React Package)
      • 🛠️Integration with Web Renderer (Javascript Package)
      • 🛠️Integration with Android Renderer
      • 🛠️Integration with iOS Renderer
      • 🛠️Integration of Experiences via Creator (React Package)
      • 🛠️Integration of Experiences via Creator (Javascript Package)
  • Incarnate
    • 🔷Getting Started
      • 🔷Device Eligibility & Settings
      • 🔷How to Download 'Incarnate by Avataar'?
      • 🔷Sign Up
        • 🔹How to Sign Up Using Google?
        • 🔹How to Sign Up Using Apple ID?
        • 🔹How to Sign Up Using Email?
      • 🔷How to Setup The Ideal Environment for Capture?
    • 🔷A Guided Tour Through the App
      • 🔷How to Choose an Object to Scan?
      • 🔷How to Use the Hamburger Menu Button?
      • 🔷How to Use the Floor Detection Feature?
      • 🔷Bounding Box
        • 🔹How to Resize the Bounding Box?
        • 🔹How to Adjust the Bounding Box?
      • 🔷How to Capture the Object?
      • 🔷How to Upload the Captured Object?
      • 🔷How to Ensure a Good Capture?
  • Release Notes
    • Version 2.4
    • Version 2.3
    • Version 2.2
    • Version 2.1
    • Version 2.0
    • December 1, 2023
Powered by GitBook
On this page
  1. Developer Documentation
  2. How to Integrate Avataar Experiences?

Integration of Experiences via Creator (Javascript Package)

Integration Steps:

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

  1. Create an html element with a specific id attribute.

Example :

 <div id="creator-exp"></div>
  1. 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>
  1. 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

🛠️
🛠️