# 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.&#x20;

Example : &#x20;

```
<div id="alhena-exp"></div>
```

2. &#x20;Once the element is created, add the following script to your webpage to import the javascript package provided by Avataar.&#x20;

```
<script src="https://web2.avataar.me/alhena-js/alhena-0.1.131.js"></script>
```

3. 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.&#x20;

```
alhena.render({
elementId: <HTML-ELEMENT-ID>,
configLink:<CONFIG-URL>,
token: <TOKEN>,
});
```

\***References** :&#x20;

HTML-ELEMENT-ID -> Where do you want to render the experience\
CONFIG-URL -> your experience config URL

TOKEN -> your token&#x20;

**Sample** : &#x20;

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>

```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avataar.ai/knowledge-center/developer-documentation/how-to-integrate-avataar-experiences/integration-with-web-renderer-javascript-package.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
