# Code examples

## Avatar Creator integration

Integrate the Avatar Creator in your game or app as an iframe or WebView\.If you followed the [Quickstart ](https://enoch-app.gitbook.io/enoch/developers-integration-guide/unity-integration/quick-start)you already integrated the Avatar Creator into a website using an iframe. This guide details the integration and customization options of this Avatar Creator.

#### Subscribe to Events <a href="#configuration" id="configuration"></a>

The iframe exposes a [post message](https://enoch-app.gitbook.io/enoch/create/posts) API that can be used to subscribe to events and for triggering certain actions. The example code from the Quickstart shows how to set up the subscription handler and how to trigger custom code on different events.To enable the events you need to append the parameter `?frameApi` to the avatar-creator URL.<https://demo.enoch.app/avatar?frameApi>

**Emitted Events**

All messages that the iframe emits will always contain a `eventName` and `source` and can be used for filtering the output that is emitted. See the table below for all the currently supported events and their sample outputs.

| v1.frame.enoch          | <p><code>{eventName: 'v1.frame.enoch',</code></p><p><code>source: 'enoch'}</code></p>                      |
| ----------------------- | ---------------------------------------------------------------------------------------------------------- |
| v1.subscription.created | `{correlationId,data: { eventName },eventName: 'v1.subscription.created',source: 'enoch',statusCode: 201}` |
| v1.subscription.deleted | `{correlationId,data: { eventName },eventName: 'v1.subscription.deleted',source: 'enoch',statusCode: 200}` |
| v1.avatar.exported      | `{data: {url,userId},eventName: 'v1.avatar.exported',source: 'enoch',}`                                    |
| v1.user.set             | `{data: { id },eventName: 'v1.user.set',source: 'enoch',}`                                                 |
| v1.user.updated         | `{data: { id },eventName: 'v1.user.updated',source: 'enoch',}`                                             |
| v1.user.logout          | `{correlationId,eventName: 'v1.user.logout'source: 'enoch'statusCode: 200type: 'queryResponse'}`           |

**Queries**

Supported messages that can be posted to the iframe after the `v1.frame.enoch` event has been emitted.

| Effect      | Message example                                                                                                      |
| ----------- | -------------------------------------------------------------------------------------------------------------------- |
| Logout user | `iframe.contentWindow.postMessage(JSON.stringify({target: 'enoch',type: 'query',eventName: 'v1.user.logout'}),'*');` |

#### Avatar Creator Configuration <a href="#configuration-1" id="configuration-1"></a>

While you can configure most of the Avatar Creator features from Studio, for some use cases it might be helpful to do it by providing a query string to the URL. The available parameters, values, and their effects are described in the following table.

| Parameter        | Value                      | Effect                                                                                                                                                                                                                                                                      |
| ---------------- | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `frameApi`       | ​                          | Enables subscribing to `postMessage` events provided by the iframe. See more about [messaging](https://docs.readyplayer.me/ready-player-me/integration-guides/web-and-native-integration/avatar-creator-integration#messaging) below.                                       |
| `clearCache`     | ​                          | Disables caching avatar customization and restarts the app upon refreshing the iframe or when creating a new instance.                                                                                                                                                      |
| `selectBodyType` | ​                          | Enables selecting between halfbody and fullbody avatars.                                                                                                                                                                                                                    |
| `bodyType`       | `'halfbody' \| 'fullbody'` | Selects a body type for the avatar in the editor or allows the user to choose from both. Please note, that this only influences the behavior of the avatar-creator, but not the avatar-type you get on requesting an avatar. If you want to change that too, please contact |