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.
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.
- 1.Create a new file in a text editor.
- 2.Copy and paste the code below into the file.
- 3.Save the file with an .html extension.
- 4.Open the file in a web browser. You should see the iframed Avatar Creator and can now create an avatar.
<!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>
Last modified 3mo ago