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:
  • Important :
  1. Developer Documentation
  2. How to Integrate Avataar Experiences?

Integration of Experiences via Creator (React Package)

PreviousIntegration with iOS RendererNextIntegration of Experiences via Creator (Javascript Package)

Pre-requisites:

To integrate the 'Experience's 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 the 'Experience's to your web application :

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

  • Add the below npm_token to the .npmrc file.

/npm.pkg.github.com/:_authToken=”token” @soulvisioncreations:registry=https://npm.pkg.github.com/SoulVisionCreations

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

`npm install @soulvisioncreations/creator-sdk`

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

`import ExperienceEditorApp from '@soulvisioncreations/creator-sdk`

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

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

  • 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.

  • 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.

πŸ› οΈ
πŸ› οΈ