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.
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' } |
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' }), '*' ); |
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 | | |
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 |
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 |
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
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.

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
Last modified 7d ago