Try Me! for Web

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.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. 
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>
Learn more about Avatar Creator iframe integration.
Contact us to become a Partner and use avatars like this one in your worlds.

Try Me! for UE Blueprint

Next - DISCOVER

Partner Showcase

Last modified 17d ago

Copy link

Outline

Simplified code

Embed the Avatar Creator into a webpage

Copy this code