🛠️Integration of Experiences via Creator (React 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.