Web - Ready Player Me – Developer Documentation

If your application lives on the web or has a user-facing web portal, you can integrate the Ready Player Me Avatar Creator via an <iframe>. 
Once a user creates an avatar, you can use its unique URL to import it into your web app or store it, for example, in a user profile. 
This also works for VR and other apps with a user-facing web-based administrative dashboard. 
Start with the Try Me! example or customize the GitHub example linked below. Both examples include code to create an iframe for the Avatar Creator on a webpage, and a script to retrieve the avatar URL once the user has finished creating it.
Sample code
​https://github.com/readyplayerme/Example-iframe​
Take a quick look
1.Go to https://github.com/readyplayerme/Example-iframe.
2.Save src/iframe.html.
3.Open the file in your browser. 
See also Firewalls.
Example
1.Go to https://github.com/readyplayerme/Example-iframe.
2.Dowlnload the HTML code in the src folder:  src/iframe.html.
3.Open the file in an editor. 
4.Find const subdomain and replace 'demo' with the yourappname portion your subdomain (https://yourappname.readyplayer.me).
5.Embed the iframe into your existing web frontend. 
6.The information in the <head> defines frame properties.
If you are not displaying full screen, set the width and height to 1280 x 800px for desktop and 720 x 1080px for mobile. 
7.The <script> sends a request to the readyplayer.me page. 
When the user has clicked the final Next button, a URL to the avatar asset is created and made available to the parent of the iframe. This script sets up an eventListener that catches and displays the avatar URL.
When a user customizes and re-exports their avatar, the updated avatar is made available through the same URL.
Configuration
Features that are accessible from the integration can be enabled 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
clearCache
true
Disables caching avatar customization and restarts the app upon refreshing the iFrame or when creating a new instance.
Usage
https://yourappname.readyplayer.me/avatar?frameApi
https://yourappname.readyplayer.me/avatar?clearCache=true

SDKs & Integrations - Previous

React Native

Next - Other

Changelog

Last modified 11d ago

Copy link

Outline