Web
Embed the Ready Player Me Avatar Creator in your website or web app.
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

Take a quick look

  1. 2.
    Save src/iframe.html.
  2. 3.
    Open the file in your browser.
See also Firewalls.

Example

  1. 2.
    Dowlnload the HTML code in the src folder: src/iframe.html.
  2. 3.
    Open the file in an editor.
  3. 4.
    Find const subdomain and replace 'demo' with the yourappname portion your subdomain (https://yourappname.readyplayer.me).
  4. 5.
    Embed the iframe into your existing web frontend.
  5. 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.
  6. 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