Links

Try Me! for Web

Integrate the Ready Player Me Avatar Creator with your website.
Take less than 15 minutes to integrate the Avatar Creator with a website using an iframe.
To let users create avatars for your application on your site, you can integrate the Avatar Creator that you used to make an avatar in Try Me! Create an Avatar into your own website.

Simplified code

The HTML code for integrating the Avatar Creator into a webpage contains
  • an iframe to hold the Avatar Creator from the demo.readyplayer.me domain,
  • script code that communicates with the Ready Player Me server.
The code for this tutorial is minimalistic to demonstrate the basic mechanics of the integration. See Web for a full example.

Embed the Avatar Creator into a webpage

  1. 1.
    Create a new file in a text editor.
  2. 2.
    Copy and paste the code below into the file.
  3. 3.
    Save the file with an .html extension.
  4. 4.
    Open the file in a web browser. You should see the iframed Avatar Creator and can now create an avatar.

Copy this code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
html,
body,
.frame {
width: 1080px;
height: 800px;
margin: 0;
padding: 20px;
border: none;
}
</style>
</head>
<body>
<iframe id="frame" class="frame" allow="camera *; microphone *"></iframe>
<script>
const subdomain = 'demo';
const frame = document.getElementById('frame');
frame.src = `https://${subdomain}.readyplayer.me/avatar?frameApi`;
window.addEventListener('message', subscribe);
document.addEventListener('message', subscribe);
function subscribe(event) {
const json = parse(event);
if (json?.source !== 'readyplayerme') {
return;
}
// Susbribe to all events sent from Ready Player Me once frame is ready
if (json.eventName === 'v1.frame.ready') {
frame.contentWindow.postMessage(
JSON.stringify({
target: 'readyplayerme',
type: 'subscribe',
eventName: 'v1.**'
}),
'*'
);
}
}
function parse(event) {
try {
return JSON.parse(event.data);
} catch (error) {
return null;
}
}
function displayIframe() {
document.getElementById('frame').hidden = false;
}
</script>
</body>
</html>
Contact us to become a Partner and use avatars like this one in your worlds.