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
  • Pre-requisites
  • Integration Process
  1. Developer Documentation
  2. How to Integrate Avataar Experiences?

Integration with Web Renderer (React Package)

PreviousHow to Integrate Avataar Experiences?NextIntegration with Web Renderer (Javascript Package)

Pre-requisites

To integrate Avataar's renderer with your web application, you will need the following equipment as a basic requirement:

  • Visual Studio Code: It is mandatory to have Visual Studio Code, a developer studio tool used to create a React-based app.

  • React and its dependencies: Since this package can only be used as a React component, you need to have React and its dependencies installed.

  • Npm_token(Authentication Token): You will need an npm_token to run the package. Please connect with the Avataar team to obtain the token.

Please make sure you have all the above equipment and dependencies in place before proceeding with the integration.

Integration Process

Please follow the below steps to Integrate Avataar’s renderer to your web application :

  • Launch Visual Studio Code on your system.

  • Once Visual Studio Code is open, navigate to the Terminal tab located in the top menu.

  • Click on the Terminal tab to open a new terminal.

  • Create a React application using the following command :

npx create-react-app β€œchoose a name without space and capital letters

Example : npx create-react-app avataar-renderer

  • Once the React application is successfully created, you will find the screenshot confirming the same.

  • Open the newly created application from your file explorer

  • Create an .npmrc file at the root level directory of your application

  • Add the npm_token provided by the Avataar team to the .npmrc file. Please connect with your point of contact at Avataar for the token.

  • Return to the Terminal and install the provided package from soulvisioncreations using the following command.

`npm install @soulvisioncreations/gemini-alhena`

  • Import the Alhena component into your application at the desired location using the following code:

`import Alhena from '@soulvisioncreations/gemini-alhena`

  • Use the Alhena component by passing the config link as a prop, as shown:

  • Adjust the height of the component in your styling code. If you want the experience to occupy the entire screen, you can set the height to 100vh (as shown in the screenshot below). Feel free to experiment with different heights to find the most suitable one for your requirements.

  • To start the experience, go to the Terminal and type the following command:

npm start

  • The provided SKU will be successfully loaded in your default browser.

Important :

  • If Node.js is not installed on your system, you will encounter an error message stating "npm command not found" when creating the React application. To resolve this issue, please download and install the Node.js package, which is an open-source, cross-platform JavaScript runtime environment. You can find the download link for Node.js here.

  • Remember to save all the changes made in your React application.

`<Alhena configLink="" token = β€œtoken will be provided by Avataar team” />`

πŸ› οΈ
πŸ› οΈ
https://orion-dev.avataar.me/alhena-test/new/configs/1744809_combined.json