creating a banner while in AR with ar-status

[jdosses]

Hi! I'm trying to set up a landing page with a simple 3D/AR experience using model-viewer. The iOS part is up and running but the 'android' part is not quite there yet.

While in AR mode I need a banner with a short description and link to my portfolio (that is working just fine with QuickLook). As the model-viewer documentation suggests I'm using ar-status through CSS. With the options 'not-presenting' and 'failed' works alright (the banner shows while in the browser, not in AR), but it is not working with 'session-started' and 'object-placed' which is what I really need. Instead o having the banner I get the screen capture button, any ideas why?

While testing I used the ar-status options one by one and all at once (as you can see in the CSS at the end of this post). So secondary question, can the ar-status options be used simultaneously? Something like: model-viewer[ar-status="session-started object-placed not-presenting failed"] so the banner is present all the time.

I'm a graphic designer so my main skills are somewhere else, I try my best with documentations and forums like this one so I apologize if I made/asked something dumb.

Here's the test-site

This is the model-viewer html

<model-viewer class="container" id="model-viewer" src="my asset.glb" reveal="auto" quick-look-browsers="safari chrome firefox" ar ar-modes="scene-viewer webxr quick-look" camera-controls camera-orbit="90deg 90deg 100m" poster="poster-image" ios-src="my asset.usdz" alt="augmented reality 3d experience" auto-rotate rotation-per-second="800%" auto-rotate-delay="0">

This is the prompt/banner html

<div id="ar-prompt"> <p class="description"> <span class="bold">Name</span><br> Title<br> </p> <p class="linked"> <a class="followLink" href="url"> <span>call to action</span></a> </p> </div>

This is the prompt or 'banner' css

model-viewer > #ar-prompt {
width: 600px;
height: auto;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
position: absolute;
bottom: 0%;
left: 50%;
background-color: #F3F7FA;
position: absolute;
display: none;
padding: 20px;
bottom: 10px;
border-radius: 12px;
border: 1px solid #DADCE0;
box-shadow: 0px 3px 5px #D6DBDF;
column-count: 2;
}

This is the ar-status css

model-viewer[ar-status="session-started"] > #ar-prompt {
display: block;
}
model-viewer[ar-status="object-placed"] > #ar-prompt {
display: block;
}
model-viewer[ar-status="not-presenting"] > #ar-prompt {
display: block;
}
model-viewer[ar-status="failed"] > #ar-prompt {
display: block;
}

[jdosses]

So I just found out about the html child element in #3811 , I'm gonna do some testing tomorrow and see what happens!

[jdosses]

Noup, didn't work.
Everything works just fine with iOS, the appended html to the src and the apple way with the custom action. But the html child element for webxr or the appended html for scene viewer won't show up in Android.

[milesgreen]

To see the HTML banner in AR, you need to be using WebXR. Currently you're prioritising SceneViewer with this attribute:

ar-modes="scene-viewer webxr quick-look"

You need to prioritise WebXR like this:

ar-modes="webxr scene-viewer quick-look"