AR Quick Look Example

Visit this page on iOS 12 to try AR Quick Look


img tag in a tag is required.
<p data-hide-on-relar>Visit this page on iOS 12 to try AR Quick Look</p> <!-- This message shoud be hidden by JS and CSS -->
<a href="path/to/stratocaster.usdz" rel="ar">
  <img src="path/to/stratocaster.jpg" width="250" height="250">

in JavaScript (How to detect whether the browser has the AR feature or not.)

/* from Apple's AR Quick Look Gallery */
(function () {
  var isRelAR = false;
  var a = document.createElement('a');
  if (a.relList.supports('ar')) {
    isRelAR = true;
  // to hide caveats by style
  document.documentElement.classList.add(isRelAR ? 'relar' : 'no-relar');

in CSS (Hide caveats)

.relar [data-hide-on-relar] {
  display: none;

More usdz are in or

More resources are in