Display custom html within AR

[Pratik-499]

Description

I want to display an "Add to cart" button within AR. I'm using "glb" file format for 3d file for both android and ios.
It works in Android but not working in ios.

How can we display a custom button within AR that support both ios and android?

<model-viewer src="https://cdn.shopify.com/s/files/1/0456/5509/7511/files/Chair.glb?v=1628335986" ios-src="https://cdn.shopify.com/s/files/1/0456/5509/7511/files/Wooden_barrel.usdz?v=1629738829" alt="A 3D model" ar ar-modes="webxr scene-viewer quick-look" auto-rotate camera-controls shadow-intensity="1" ar-placement="wall"> <button type="button" class="btn-ar-addToCart"> <span class="btn-txt">Add to cart</span> </button> </model-viewer>

Live Demo

Version

• model-viewer: vX.X.X

OS

• Android
• iOS

AR

• WebXR
• SceneViewer
• QuickLook

[elalish]

Unfortunately until Apple supports WebXR, there isn't a consistent way to do this. However, you can add query params to your ios-src to get most of what you want: https://developer.apple.com/documentation/arkit/adding_an_apple_pay_button_or_a_custom_action_in_ar_quick_look

[rawwerks]

thanks for the quick save @milesgreen ! (as usual).

clarifying question - i assume this approach would preclude the use of the auto-generated usdz. is this correct? or is there a way to point ios-src to the html of the auto-generated usdz?

[milesgreen]

No problem!

If using auto-generated USDZ, instead simply add these # parameters to the end of the GLB path of the src parameter.

[milesgreen]

Note that passing # parameters through auto-generated USDZs only works for Safari iOS 15.5 and up. Prior to that, Safari didn't handle it well and either ignored the parameters or, worse, could actually block the 3D model from ever loading in QuickLook. So it's worth checking for that, and having a graceful fallback, or directing users to upgrade.

You'll probably want to use at least ModelViewer v2.1.0 as that also includes a number of related iOS fixes:

#3434
#3784
#3850

[rawwerks]

is this is the right way to listen to the event?

<model-viewer id="mv" otherstuff></model-viewer>
<script>
    document.querySelector("#mv").addEventListener('quick-look-button-tapped', (event) => {
      window.location.assign('https://my.link.to.cart');
    });
</script>

update: this seems to work for me, just want to have someone check my work since there isn't a specific example on the docs for quick-look-button-tapped

[elalish]

Yep, just like any other event.

[rawwerks]

on this topic of cross-compatible in-AR buy buttons - anyone have the CSS for the default apple quicklook buy button, so that i can have the same style on Android? (or any examples showing code that provides an in-AR buy button regardless of which ar mode is being used?)