# Quick start

Integrate the Enoch Avatar Creator with an HTML page. For this Quick start guide, you will integrate the Avatar Creator into a website using Enoch APIs. It takes less than 5 minutes! You can use this method for integrating with any stack that supports REST and postMessage.

#### Embed the Avatar Creator into a web page <a href="#embed-the-avatar-creator-into-a-web-page" id="embed-the-avatar-creator-into-a-web-page"></a>

1. Create a new .html file in a text editor.
2. Copy and paste the code below into the file and save it.
3. Open the file in a web browser.
4. Click **Open Enoch**. The Avatar Creator iFrame opens.
5. Create an avatar.
6. After creating the avatar, you'll receive the avatar URL in the `v1.avatar.exported` event. In the event handler, the avatar URL is shown and the Avatar Creator iFrame gets hidden again.

See the example code for details.

#### Example code <a href="#example-code" id="example-code"></a>

```
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
        html,
        body,
        .frame {
            width: 1080px;
            height: 800px;
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans,
                Droid Sans, Helvetica Neue, sans-serif;
            padding: 20px;
            font-size: 14px;
            border: none;
        }

        .warning {
            background-color: #df68a2;
            padding: 3px;
            border-radius: 5px;
            color: white;
        }
    </style>
</head>

<body>
    <h2>Enoch iframe example</h2>
    <ul>
        <li>Click the "Open Enoch" button.</li>
        <li>Create an avatar and click the "Done" button when you're done customizing.</li>
        <li>After creation, this parent page receives the URL to the avatar.</li>
        <li>The Enoch window closes and the URL is displayed.</li>
    </ul>
    <p class="warning">
        If you have a subdomain, replace the 'demo' subdomain in the iframe source URL with yours.
    </p>

    <input type="button" value="Open Enoch" onClick="displayIframe()" />
    <p id="avatarUrl">Avatar URL:</p>

    <iframe id="frame" class="frame" allow="camera *; microphone *; clipboard-write" hidden></iframe>

    <script>
        const subdomain = 'demo'; // Replace with your custom subdomain
        const frame = document.getElementById('frame');

        frame.src = `https://${subdomain}.enoch.app/avatar?frameApi`;

        window.addEventListener('message', subscribe);
        document.addEventListener('message', subscribe);

        function subscribe(event) {
            const json = parse(event);

            if (json?.source !== 'enoch') {
                return;
            }

            // Susbribe to all events sent from Enoch once frame is ready
            if (json.eventName === 'v1.frame.ready') {
                frame.contentWindow.postMessage(
                    JSON.stringify({
                        target: 'enoch',
                        type: 'subscribe',
                        eventName: 'v1.**'
                    }),
                    '*'
                );
            }

            // Get avatar GLB URL
            if (json.eventName === 'v1.avatar.exported') {
                console.log(`Avatar URL: ${json.data.url}`);
                document.getElementById('avatarUrl').innerHTML = `Avatar URL: ${json.data.url}`;
                document.getElementById('frame').hidden = true;
            }

            // Get user id
            if (json.eventName === 'v1.user.set') {
                console.log(`User with id ${json.data.id} set: ${JSON.stringify(json)}`);
            }
        }

        function parse(event) {
            try {
                return JSON.parse(event.data);
            } catch (error) {
                return null;
            }
        }

        function displayIframe() {
            document.getElementById('frame').hidden = false;
        }
    </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://enoch-app.gitbook.io/enoch/developers-integration-guide/web-and-native-integration/quick-start.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.
