Avatar Creator

Integrate the Avatar Creator via iframe or WebView.

The Avatar Creator can be integrated into your app via iframe or WebView. The communication between your app or game and the Avatar Creator is by postMessage.

Emitted Events

All messages emitted by the iframe contain an eventName and source which can be used for filtering the emitted output. See the table below for all currently supported events and their sample outputs.

Event Payload example

Event	Payload example
v1.frame.ready	`{ eventName: 'v1.frame.ready', source: 'readyplayerme' }`
v1.subscription.created	`{ correlationId, data: { eventName }, eventName: 'v1.subscription.created', source: 'readyplayerme', statusCode: 201 }`
v1.subscription.deleted	`{ correlationId, data: { eventName }, eventName: 'v1.subscription.deleted', source: 'readyplayerme', statusCode: 200 }`
v1.avatar.exported	`{ data: { url, userId }, eventName: 'v1.avatar.exported', source: 'readyplayerme', }`
v1.user.set	`{ data: { id }, eventName: 'v1.user.set', source: 'readyplayerme', }`
v1.user.updated	`{ data: { id }, eventName: 'v1.user.updated', source: 'readyplayerme', }`
v1.user.logout	`{ correlationId, eventName: 'v1.user.logout' source: 'readyplayerme' statusCode: 200 type: 'queryResponse' }`

v1.frame.ready

{
  eventName: 'v1.frame.ready',
  source: 'readyplayerme'
}

v1.subscription.created

{
  correlationId,
  data: { eventName },
  eventName: 'v1.subscription.created',
  source: 'readyplayerme',
  statusCode: 201
}

v1.subscription.deleted

{
  correlationId,
  data: { eventName },
  eventName: 'v1.subscription.deleted',
  source: 'readyplayerme',  
  statusCode: 200
}

v1.avatar.exported

{
  data: {
    url,
    userId
  }, 
  eventName: 'v1.avatar.exported',
  source: 'readyplayerme', 
}

v1.user.set

{
  data: { id },
  eventName: 'v1.user.set',
  source: 'readyplayerme',
}

v1.user.updated

{
  data: { id },
  eventName: 'v1.user.updated',
  source: 'readyplayerme',
}

v1.user.logout

{
  correlationId,
  eventName: 'v1.user.logout'
  source: 'readyplayerme'
  statusCode: 200
  type: 'queryResponse'
}

Queries

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

Effect Message example

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

Logout the user

iframe.contentWindow.postMessage(
  JSON.stringify({
    target: 'readyplayerme',
    type: 'query',
    eventName: 'v1.user.logout'
  }),
  '*'
);

Avatar Creator configuration

You can configure features of the Avatar Creator by providing a query string to the URL.

See all avatar creator options ->

The available parameters, their values if necessary, and their effects are described in the following table.

Parameter Value Effect

Parameter	Value	Effect
`frameApi`		Enables subscribing to `postMessage` events provided by the iframe. See more about below.
`clearCache`		Disables caching avatar customization and restarts the app upon refreshing the iframe or when creating a new instance.
`selectBodyType`		Enables selecting between half-body and full-body 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

frameApi

Enables subscribing to postMessage events provided by the iframe. See more about below.

clearCache

Disables caching avatar customization and restarts the app upon refreshing the iframe or when creating a new instance.

selectBodyType

Enables selecting between half-body and full-body 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

Examples
https://yourappname.readyplayer.me/avatar?frameApi
https://yourappname.readyplayer.me/avatar?clearCache&bodyType=halfbody

Examples

https://yourappname.readyplayer.me/avatar?frameApi

https://yourappname.readyplayer.me/avatar?clearCache&bodyType=halfbody

Default Language

The Avatar Creator automatically picks the system/browser language of the user's device. To set a different default language, do one of the following.

This is not available from Studio. You need to modify the URL of the Avatar Creator.

To change the language, include the language code in the URL path.

Example URL for setting German as the default language.

https://yoursubdomain.readyplayer.me//avatar

Supported languages and their language codes

Language	Code
English	en
English (Ireland)	en-IE
German	de
French	fr
Spanish	es
Spanish (Mexican)	es-MX
Portuguese	pt
Portuguese (Brazil)	pt-BR
Italian	it
Turkish	tr
Japanese	jp
Korean	kr
Chinese	ch

Language

Code

English

English (Ireland)

en-IE

German

French

Spanish

Spanish (Mexican)

es-MX

Portuguese

Portuguese (Brazil)

pt-BR

Italian

Turkish

Japanese

Korean

Chinese

Clear Cache

By default, the Avatar Creator uses local browser storage to store and restore a user's session, such as their login state and current avatar creation step.

If you want to disable this behavior, for example if multiple users are using the same device, use the ClearCache parameter.

Open the Avatar Creator with the query string ?clearCache

https://demo.readyplayer.me/de/avatar?clearCache

Quick Start for users

Use the Quickstart option to get the user into gameplay as quickly as possible. With this option set, the user can select a provided avatar to start right away, create a personal avatar, or login with Ready Player Me and choose one of their existing avatars.

You can try it out on the demo Avatar Creator: https://demo.readyplayer.me/avatar?quickStart

Use the quickStart parameter to enable this option. Therefore open the Avatar Creator with the query string ?quickStart

https://demo.readyplayer.me/de/avatar?quickStart

PreviousOculus OVR LipSync NextBug Reports and Feature Requests

Last updated 1 year ago