Links

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.
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