Integration IFrame - Help

Get Help External Collections, Custom Actions & Collections
1

Hi !
I’m in need of help with some urgency!
I’m having difficulty integrating an iFrame for creating Avatars in my app.

The tool is from another company and the instructions they gave me were these:

image
image901×778 32 KB

2

Hi @mikaellapavani,
You can try using the Nocoder HQ HTML Renderer component in the component marketplace with the HTML code.
Don’t know if it will work - worth giving it a try.

3

I’ve already tried this alternative and it doesn’t work!

Even so, thanks for the tip!

4

Hello @mikaellapavani ,

sorry for that, can you please explain more what you are trying to do maybe there is another way to do it?

Thank you

5

Come on!

I need to implement an iFrame in my app that redirects to a URL where users can create 3D avatars. But when I use WebView, the “copy” button that appears doesn’t work inside the App.

My url is: gmcavatart.readyplayer.me

Then avatar creator support replied that I can integrate via IFrame with an HTML code.

Here it is:

.container { margin-top: 100px; margin: auto; } 
  .content {
    margin-top: 10px;
    border: none;
    width: 100%;
    height: calc(100%);
  }

  #avatarUrl {
    margin-top: 10px;
  }

  body {
    padding: 20 40;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
      Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
    background-color: rgb(243, 243, 243);
  }
</style>

<script>
  // Change this to your custom subdomain
  const iframeUrl = 'https://demo.readyplayer.me/'

  // Listen to messages from the iframe
  window.addEventListener('message', receiveMessage, false)

  // Handle messages from the iframe
  function receiveMessage(event) {
    // Get URL to avatar
    const url = event.data
    console.log(`Avatar URL: ${url}`)
    document.querySelector('#avatarUrl').innerHTML = `Avatar URL: ${url}`
    document.querySelector('.container').removeChild(iframe)
  }

  function loadIframe() {
    let iframe = document.getElementById('iframe')

    if (!iframe) {
      iframe = document.createElement('iframe')
      document.querySelector('.container').appendChild(iframe)
    }
    iframe.id = 'iframe'
    iframe.src = iframeUrl
    iframe.className = 'content'
    iframe.allow = 'camera *; microphone *'
  }
</script>

Ready Player Me iframe example

  • Click "Open Ready Player Me" button.
  • Create an avatar.
  • Click on "Done" button when you finish customizing your avatar.
  • This page will receive the url when it is created.
  • Url will be displayed, and Ready Player Me window will be closed.
Avatar URL: