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 with Web Renderer (Javascript Package)

Integration Steps:

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

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

Example :

<div id="alhena-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/alhena-js/alhena-0.1.131.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 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

🛠️
🛠️