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" />
<iframe id="frame" class="frame" allow="camera *; microphone *"></iframe>
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') {
// Susbribe to all events sent from Ready Player Me once frame is ready
if (json.eventName === 'v1.frame.ready') {
frame.contentWindow.postMessage(
return JSON.parse(event.data);
function displayIframe() {
document.getElementById('frame').hidden = false;