🛠️Integration with Web Renderer (React 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:

`<Alhena configLink="https://orion-dev.avataar.me/alhena-test/new/configs/1744809_combined.json" 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.

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

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