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
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
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
frameApi
​
Enables subscribing to postMessage events provided by the iframe. See more about 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 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 
quickStart
​
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. See below.​
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/de/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
​
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

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' }

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

Parameter	Value	Effect
`frameApi`		Enables subscribing to `postMessage` events provided by the iframe. See more about 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 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
`quickStart`		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. See below.

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

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

Oculus OVR LipSync

Next - Support

AI Copilot

Last modified 7d ago