Studio Inline AR

[David_Oldham]

Does Studio provide a way to enable inline AR experiences in the same way as the legacy code version?

[Arukemi]

Legacy code had an example for inline AR through iframe implementation. I suppose you would have to do it kind of the same way

Maybe having a Website Space and a AR Space, make an iframe on the website space that loads your project with an url parameter, then use an if to load AR space if parameter is present. If you are adding the inline in another website you would just need the AR Space and add the iframe code to your site. Don’t forget to add permissions to the iframe so it can load the camera and read the phone sensors.

[GeorgeButler]

Yeah it should be a matter of just making the iframe and pointing it at the 8th Wall project with the correct permissions. You only needed special code in the inner/outer frames prior to iOS 14. As of iOS15, you simply needed the proper permissions on the iframe.

For example:

<iframe allow="camera;gyroscope;accelerometer;magnetometer;xr-spatial-tracking;microphone;"></iframe>

[David_Oldham]

Thanks for the reply guys, I get the iframe and it’s pointing to the correct project but it shows only the 8th wall splash screen and incidentally two buttons I had made as part of the project! apologies if im being a bit new to this. Thanks,

[Arukemi]

That means it’s trying to run the PC version of the project and you have it disabled (you only have Mobile support) that´s why it gives you the splash screen. If you want the iframe to run the mobile version you should change the iframe size so it has a similar aspect ratio to a phone

[David_Oldham]

I’ve tried playing about with the aspect ratio but still shows the same splash screen. Ive also disabled the desktop camera in the project settings in studio so it should only have mobile AR enabled. Is there a way to force the mobile version?

  <iframe
    id="main-ar-iframe"
    src="https://URL HERE"
    allow="camera;gyroscope;accelerometer;magnetometer;xr-spatial-tracking;fullscreen;"
    style="width:90vw;height:90vw;max-width:90vw;max-height:90vw;border:0;border-radius:16px;display:block;background:#000;"
    title="AR Experience"
  ></iframe>

[GeorgeButler]

Try setting it to have the same aspect ratio as a phone. (9:16)

[David_Oldham]

Still no luck, same screen on mobile and desktop

  <iframe
      id="main-ar-iframe"
      allow="camera;gyroscope;accelerometer;magnetometer;xr-spatial-tracking;fullscreen;"
      style="width:56.25vw;height:100vw;max-width:56.25vw;max-height:100vw;border:0;border-radius:16px;display:block;background:#000;"
      title="AR Experience"
    ></iframe>

[Arukemi]

Hey David I think it’s because you are changing the style size and not the actual virtual size of the iframe. If you change Height and Width inside the style label then it controls how the iframe should display on your website. BUT if you want to change the virtual size of the iframe viewport you have to change the height and width label ON the iframe , like this:

iframe
id=“main-ar-iframe”
allow=“camera;gyroscope;accelerometer;magnetometer;xr-spatial-tracking;fullscreen;”
style=“width:56.25vw;height:100vw;max-width:56.25vw;max-height:100vw;border:0;border-radius:16px;display:block;background:#000;”
title=“AR Experience”
height=“659”
width=“393”

[David_Oldham]

Hi Arukemi, thanks for the help! Still the same screen unfortunately though.

    <iframe
    id="main-ar-iframe"
    src="https://8th.io/wyfxv"
    allow="camera; microphone; gyroscope; accelerometer; magnetometer; xr-spatial-tracking; fullscreen;"
    style="border: 0; border-radius: 16px; display: block; background: #000;"
    height="659"
    width="393"
    title="AR Experience"
  ></iframe>

[Arukemi]

Well after giving it a try it seems that 8thwall now uses the device type to check whether it should show PC banner or run the project (I kind of recall it using device measurements before but now I’m not that sure)

Here by just changing the device type it makes 8thwall run the project ignoring the size of the iframe:

So if you embed it to your site and use your PC it will load the banner BUT if you open on a phone it will run the project as expected (this is actually the best behavior as PC do not have sensors like a phone), if you do want your project to open on a PC you would have to enable 3D on your project and add interaction with mouse and/or keyboard. You would have to add a background to replace the camera feed.

If you just want the iframe to run on mobile tho then this behavior is expected, although the QR on the banner would open the project instead of your website.

So my recommendation in that case is to allow PC on your project and add a custom banner with a QR to your website, that way if someone enters through a PC the iframe will show they have to go mobile but the QR would send them to your website instead of 8thwall project. So when they open it on a phone the iframe will load your project correctly on your website.

Hope this helps

[David_Oldham]

Hmm I get the same as your screenshot although no prompts for camera access etc it just stays on the black screen.

[Arukemi]

Are you opening it on the phone? Even if you use chrome to simulate device I think it won’t prompt to open camera

[David_Oldham]

Yeah running on safari or chrome on my iPhone in either local server or actually publishing online.